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>
Related
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>
Audio does not play on both Chrome and Firefox. Why?!
https://jsfiddle.net/8udfegbq/
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<audio id="my-audio" class="video-js" controls="controls" preload="auto" data-setup="{}">
<source/>
<p>
To hear this audio please enable JavaScript, and consider upgrading to a
web browser that
supports HTML5 audio
</p>
</audio>
<script>
function displayVideo(id, link) {
link = "https://arweave.net/eAESnl8QnIw9gG4Wj1RvK3dlLepMlIsDEGiYNqTp_zw";
$.ajax(link, {method: 'HEAD'})
.then(function(data, textStatus, xhr) {
console.log("Loaded.")
const type = "audio/wav";
const source = $(`#${id}audio source`);
source.attr('src', link);
source.attr('type', type);
})
}
displayVideo('my-', "https://arweave.net/eAESnl8QnIw9gG4Wj1RvK3dlLepMlIsDEGiYNqTp_zw");
</script>
</body>
</html>
After setting the attribute on the source element, tell the audio element to load the source. This should do the trick:
$("#my-audio")[0].load();
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>
http://graysonearle.com/bluemen/
Click on that with a webkit browser. On load it should have a 4x4 grid of videos appear, but only 1-3 videos tend to load on Chrome. Works just fine on Safari, what gives? They are the same video. When I did it with a smaller video it worked fine, I suppose this could have something to do with it. Is there any way to force a load on more than a few videos on a page?
if you suffix each video with a cache buster it seems to work fine. On Chrome it does the right thing and loads the first frame as a poster fairly quickly, but on Safari you need to explicitly select a poster
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/reset.css">
<link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/style.css">
</head>
<body>
<script>
for (var i=0;i<10;i++) {
document.write('<div class="vidBox" id="box'+i+'">');
document.write(' <video class="vid" preload="metadata" controls="true" id="vid'+i+'">');
document.write(' <source src="http://graysonearle.com/bluemen/videos/fullvid.mp4?a='+i+'" type="video/mp4">');
document.write(' <source src="http://graysonearle.com/bluemen/videos/red.webm" type="video/ogg">');
document.write(' </video>');
document.write('</div>');
}
</script>
</body>
</html>
If that doesn't work (and it looks like the browser buffer can still sometimes get choked) then what you need to do is load the video sources one by one, triggering the load on the canplaythrough event.
all in all it doesn't seem very robust, good luck
EDIT
Okay, this version is more robust, but needs a little tidying up....
it grabs the video once as a blob via an async ajax call, then passes it as the source to each of the video elements... you'd probably want to load a poster into the videos and display some sort of progress bar until the video has loaded.
I had to do this sample against my test video because I don't have cross-domain rights to your domain so couldn't easily test with your size video... but give it a try
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/reset.css">
<link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/style.css">
<title></title>
</head>
<body>
<script type="text/javascript">
for (var i=0;i<10;i++) {
document.write('<div class="vidBox" id="box'+i+'">');
document.write(' <video class="vid" preload="metadata" controls="true" id="vid'+i+'">');
document.write(' <\/video>');
document.write('<\/div>');
}
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://jcath-drg.s3.amazonaws.com/BigBuck.m4v', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
console.log("got it");
var myBlob = this.response;
var vid = (window.webkitURL ? webkitURL : URL).createObjectURL(myBlob);
// myBlob is now the blob that the object URL pointed to.
for (var i=0;i<10;i++) {
display(i,vid)
}
}
};
xhr.send();
function display(i,vid){
var video = document.getElementById("vid"+i);
console.log(video);
video.src = vid;
}
</script>
</body>
</html>