I dont have acsesses to the code on ruffle.js and when i try ti use other metheits it says extension blocked but ruffle has worked on this computer and anyone help?
"My" code rn is:
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf8'>
</head>
<body>
<div id='ruffle'></div>
<script>
window.RufflePlayer = window.RufflePlayer || {};
window.addEventListener("DOMContentLoaded", () => {
let ruffle = window.RufflePlayer.newest();
let player = ruffle.createPlayer();
let container = document.getElementById("container");
container.appendChild(player);
player.load("movie.swf");
});
</script>
<script src="https://flash-games.penguinbotcoder.repl.co/ruffle/ruffle.js"></script>
<object width="600" height="400">
<param name="movie" value="https://flash-games.penguinbotcoder.repl.co/flashgames/thinice.swf">
<embed src="https://flash-games.penguinbotcoder.repl.co/flashgames/thinice.swf">
</embed>
</object>
<script src="path/to/ruffle/ruffle.js"></script>
</body>
<div class=ruffle>
</div>
<p>This is a test page for flash content</p>
</html>
as i sayed up there its just not working :(
I don't understand well what is exactly the problem but this is what I noticed from you code:
You are trying to get an element by id container but you don't have that element in your HTML, I think you try to use the element with id ruffle instead.
window.addEventListener("DOMContentLoaded", () => {
let ruffle = window.RufflePlayer.newest();
let player = ruffle.createPlayer();
let container = document.getElementById("ruffle");
container.appendChild(player);
player.load("movie.swf");
});
Update:
If still not working then try this example code and see if it loads the Flash content...
<!DOCTYPE HTML>
<html>
<head> <meta charset='utf8'> </head>
<body>
<script src="https://flash-games.penguinbotcoder.repl.co/ruffle/ruffle.js"></script>
<div id='ruffle'></div>
<p>This is a test page for Adobe Flash content</p>
</body>
<script>
window.RufflePlayer = window.RufflePlayer || {};
window.addEventListener("DOMContentLoaded", start_Ruffle, false );
function start_Ruffle()
{
let ruffle = window.RufflePlayer.newest();
let player = ruffle.createPlayer();
let container = document.getElementById("ruffle");
container.appendChild(player);
player.load("https://flash-games.penguinbotcoder.repl.co/flashgames/thinice.swf");
}
</script>
</html>
Related
I used the website tsviewer.com to create an insertable piece of HTML code I can insert into my webpage that will display the status of my Teamspeak server. This is what it gave me. But this doesn't quite work in vue as I don't know where to place the scripts.
<div id="ts3viewer_1118023" style=""> </div>
<script src="https://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script>
var ts3v_url_1 = "https://www.tsviewer.com/ts3viewer.php?ID=1118023&text=757575&text_size=12&text_family=1&text_s_color=000000&text_s_weight=normal&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_i_color=&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_c_color=&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_u_color=000000&text_u_weight=normal&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_s_color_h=&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=none&text_i_color_h=000000&text_i_weight_h=bold&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=none&text_c_color_h=&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=none&text_u_color_h=&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none&iconset=default";
ts3v_display.init(ts3v_url_1, 1118023, 100);
</script>
Discord on the other hand gives a single line of code that is easily inserted and works perfectly.
<iframe src="https://discordapp.com/widget?id=261587898996883458&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
The question is, how does one convert the one kind to the other kind? Thanks
you need to add the Javascript before the tag of your
website ends.
important is than that you render an div which the right id
Here some example
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
</script>
<script src="https://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script>
var ts3v_url_1 = "[add here the whole teamspeaker snippet url]";
ts3v_display.init(ts3v_url_1, 1118023, 100);
</script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>
<div id="ts3viewer_1118023" style=""> </div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
});
</script>
</body>
</html>
I have removed the tsviewer code in his full length because the list is public.
You should add him there [add here the whole teamspeaker snippet url]
Maybe you should also modfiy your post after it or change the url as an example.
I am trying to implement a button that plays audio. I don't want to have the slider.
Is there anyway to rid of the slider, or maybe use an image of a button instead?
Current code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Music</title>
<style type="text/css">
body {
color:transparent;
}
</style>
</head>
<body onLoad="RandomSong();">
<audio id="content" src="background1.mp3" controls></audio>
<script>
function RandomSong() {
var Music = ["background1.mp3","background2.mp3","background3.mp3","background4.mp3","background5.mp3"];
var randomCode = Math.floor(Math.random()*Music.length);
document.getElementById("content").value = "mp3=" + Music[randomCode] + "&showslider=0&width=5&loop=1&autoplay=0&volume=50";
}
</script>
</body>
</html>
There is a simple JQuery solution to this:
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track1').click(function(){
$('#wrap').append('<embed id="embed_player" src="audio.wav" autostart="true" hidden="true"></embed>');
});
});
</script>
<img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" />
<div id="wrap"> </div>
Src: Check out this similar post with an answer from #blasteralfred: Play sound file when image is clicked
I'm into making word games for kids, I been playing around with this code for How to make an image that plays audio when cicked. I hope this will help you
I'm using Notepad++ this code works in Google Chome
<!DOCTYPE html>
<html>
<script>
var audio1 = new Audio("/Sound 1/Samples 1Sounds/CAT.wav ");
audio.oncanplaythrough = function(){}
audio.onended = function(){}
</script>
<input type="image" id="myimage"style="height:200px;width:200px;"src="/Picture 1/Samples Pictures/cat.jpg"
onclick="audio1.play()">
<script>
var audio2 = new Audio("/Sound 1/Samples 1Sounds/dog.wav ");
audio.oncanplaythrough = function(){}
audio.onended = function(){}
</script>
<input type="image" id="myimage" style="height:200px;width:200px;"src="/Picture 1/Samples Pictures/dog.jpg"
onclick="audio2.play()">
</html>
Ive been trying everything I know but I cant seem to just add in the video, in the center of the page, to loop non-stop. Am I using a wrong code or...?
I am currently using the latest Firefox browser
Code: http://pastebin.com/NJywJwaW
Try now
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var vid = document.getElementById("myVideo");
vid.autoplay = true;
vid.loop = true;
vid.controls = false;
vid.load();
</script>
</head>
<body bgcolor="#000000">
<center>
<video id="myVideo" autoplay>
<source src="sk1logo1.mp4" type="video/mp4">
</video>
</center>
</body>
</html>
I'm trying the HTML5 video tag as in this example, but not everything is working.
I want to use the ontimeupdate event to print current video time:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<video src="test.ogv" width='640' height='480' controls='controls'>
</video>
<div id=time>time</div>
<script>
var video = document.getElementsByTagName('video')[0];
var time = document.getElementById('time');
video.ontimeupdate = function(e) {
time.innerHTML="Current time: " + video.currentTime;
}
</script>
</body>
</html>
This works in Opera and Firefox, but not in Google Chrome.
So, why does this code not working in Chrome?
This works for me, maybe chrome's bug/fault your code doesn't work
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<video src="test.mp4" width='640' height='480' controls='controls' ontimeupdate="timeupdate();">
</video>
<div id=time>time</div>
<script>
var video = document.getElementsByTagName('video')[0];
var time = document.getElementById('time');
function timeupdate() {
time.innerHTML = 'Current time: ' + video.currentTime;
}
</script>
</body>
</html>
SO I know this solution is somewhere but I can't find it. I've been digging for about a day into google and stackOverflow.
Basically, I have an iframe and I'm trying to get it to expand to the size of its contents, a pretty simple task. I went through several methods, looking at different heights etc. But for some gosh darn reason, Chrome does not want to put up with me.
So here is the javascript to resize the IFrame. To make sure JS was working and to read the height I threw in that innerHTML piece (sort of like debugging)
<script type="text/javascript">
function resizeFrame() {
var t=document.getElementById("Footer");
var f = document.getElementById("mainContent");
var y = f.contentWindow;
t.innerHTML = y.document.body.offsetHeight;
f.height = y.body.offsetHeight;
}
</script>
Here's the iframe:
<iframe onload="resizeFrame()" id="mainContent" src="homec.html" scrolling=auto frameborder=0 height="100%" width="100%">
Not working!</iframe>
So for some odd reason, it does not want to work, pretty much hates me in Chrome. But it works in Firefox and IE. Any solutions??
Unless I'm missing something, I believe you have a typo on the last line of your function (missing .document.)
The following works for me in Chrome (18.0):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function resizeFrame() {
var t=document.getElementById("Footer");
var f = document.getElementById("mainContent");
var y = f.contentWindow;
t.innerHTML = y.document.body.offsetHeight;
f.height = y.document.body.offsetHeight;
}
</script>
</head>
<body>
<iframe onload="resizeFrame()" id="mainContent" src="homec.html" scrolling=auto frameborder=0
height="100%" width="100%">Working!</iframe>
<p id="Footer"> Footer</p>
</body>
</html>