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();
Related
my project need to show the final audio processed to the user so i am using audio html tag and processed all the audio work in java script side the problem is how to give the processed audio to the html audio tag
i did it with button tag but can't do with audio tag (not working)ny help
java script mus.js
const mus = {
A : new Audio("pA.mp3"),
B : new Audio("pB.mp3")
}
let txt="";
function emc()
{
txt = document.getElementById("d1").value.toUpperCase()
console.log(txt);
for (const char of txt)
{
mus[char].playbackRate = 2;
char in mus ? mus[char].play() : char;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>audio</title>
</head>
<body>
<script src = "muss.js"></script>
<br>
<textarea id="d1" rows="13" cols="60"></textarea><br><br><br>
<input type="button" value="playing" onClick="emc()"></input>
<audio controls autoplay muted >
<source src="x" type="audio/ogg">
</audio>
<br>
<br><br><br>
<button id="d0" onclick="playMusic()">work</button>
<br>
<br><br><br>
<!--<div id="x"></div>-->
<button id="x" onclick="emc()">Set Song</button>
<audio controls onplay="playMusic()" autoplay muted> /// here this is not showing the playing music instead only empty one
<source src='${audio}' type="audio/mpeg"></source>
</audio>
</body>
</html>
i tried every thing i know but not working help me
any suggestions or ideas ??
How do you detect when a HTML5 <video> element has finished playing?
You can add an event listener with 'ended' as first param
Like this :
<video src="video.ogv" id="myVideo">
video not supported
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}
</script>
Have a look at this Everything You Need to Know About HTML5 Video and Audio post at the Opera Dev site under the "I want to roll my own controls" section.
This is the pertinent section:
<video src="video.ogv">
video not supported
</video>
then you can use:
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
/*Do things here!*/
};
</script>
onended is a HTML5 standard event on all media elements, see the HTML5 media element (video/audio) events documentation.
JQUERY
$("#video1").bind("ended", function() {
//TO DO: Your code goes here...
});
HTML
<video id="video1" width="420">
<source src="path/filename.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Event types HTML Audio and Video DOM Reference
You can simply add onended="myFunction()" to your video tag.
<video onended="myFunction()">
...
Your browser does not support the video tag.
</video>
<script type='text/javascript'>
function myFunction(){
console.log("The End.")
}
</script>
Here is a simple approach which triggers when the video ends.
<html>
<body>
<video id="myVideo" controls="controls">
<source src="video.mp4" type="video/mp4">
etc ...
</video>
</body>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', function(e) {
alert('The End');
})
</script>
</html>
In the 'EventListener' line substitute the word 'ended' with 'pause' or 'play' to capture those events as well.
Here is a full example, I hope it helps =).
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
alert("Video Finished");
}
</script>
</body>
</html>
You can add listener all video events nicluding ended, loadedmetadata, timeupdate where ended function gets called when video ends
$("#myVideo").on("ended", function() {
//TO DO: Your code goes here...
alert("Video Finished");
});
$("#myVideo").on("loadedmetadata", function() {
alert("Video loaded");
this.currentTime = 50;//50 seconds
//TO DO: Your code goes here...
});
$("#myVideo").on("timeupdate", function() {
var cTime=this.currentTime;
if(cTime>0 && cTime % 2 == 0)//Alerts every 2 minutes once
alert("Video played "+cTime+" minutes");
//TO DO: Your code goes here...
var perc=cTime * 100 / this.duration;
if(perc % 10 == 0)//Alerts when every 10% watched
alert("Video played "+ perc +"%");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</body>
</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>
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>