So I have a very simple code which worked yesterday. I get back on the computer this morning and it looks like it does not work anymore.
What I checked:
Whether or not my function runs onload (it does)
If the path for the audio file is correct (it is)
I tried putting the src directly in the audio tag (and deleting the onload call just to make sure). It still does not work.
The code:
HTML:
<body onload="startMusic()">
<audio id="audio" autoplay loop>
Your browser does not support HTML5 audio.
</audio>
<!--rest of the page-->
JS:
const audio = document.getElementById("audio");
function startMusic(){
audio.src = "./audio/myFile.mp3";
}
I don't have any console error.
Thank you for your time.
I try this example which works only when I click the button. But when I try to call the playAudio method automatically (when the page load), it doesn't work. I have commented out the code.
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
// Doesn't work
playAudio();
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio">
<source src="media/sound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playAudio()" type="button">Play Audio</button>
</body>
</html>
I google for the error and tried below solution but still doesn't work.
var x = document.getElementById("myAudio");
var promise = x.play();
if (promise) {
//Older browsers may not return a promise, according to the MDN website
promise.catch(function(error) {
console.error(error);
});
}
<body onload=‘playAudio()’>
Body
</body>
U can use <body onload="playAudio()">
I have a javascript code like below:
<script type="text/javascript" charset="utf-8">
function addmsg(count, play){
if(play == 'true')
{
$("#my_audio").get(0).play();
}
}
</script>
<html>
<audio id="my_audio" src="popsound.mp3"></audio>
</html>
In the above code "play" variable is like a flag containing true or false value, and it plays the sound when play=='true'.The above code is working fine on my laptop browser,but when I'm accessing the page through my mobile the sound doesnt gets played. I did some research but I'm unable to figure out how to do it in my case. I'm very new to this field so sorry if this question is senseless, but can any one please help me. I wanted to make it work fine for mobile browser's too.Thank you in advance.
You need to put different formats for all devices (.ogg and .mp3).
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Source : http://www.w3schools.com/html/html5_audio.asp
I have a welcome video playing by default in loop and when a user click on change video button a different video starts playing. But there is a blackout between change of video for about 1-3 seconds. I want to present my video as the video has not changed its still playing same video [I want it look like that a single video is playing i don't want blackout interfering with it]
Here how i am changing video
<!DOCTYPE html>
<html>
<head><title>Draw your gifts here</title></head>
<body>
<video width="1000" id="videotag" autoplay controls>
<source src="media/welcome.mp4">
This browser does not support this format please upgrade your browser or use different browser
</video>
<button type="button" onClick="changeVideo()">Change Video</button>
</body>
<script>
function changeVideo(){
var video_player = document.getElementById("videotag");
video_player.src = "media/draw1.mp4";
}
</script>
</html>
You can use preload auto for preventing the loading delay
<video width="1000" id="videotag" autoplay preload="auto" controls>
<source src="media/welcome.mp4">
This browser does not support this format please upgrade your browser or use different browser
</video>
This question already has answers here:
HTML5 Video / End of a Video Poster
(10 answers)
Closed 6 years ago.
I was using Video.JS but ultimately had to scrap it and go with plain HTML video embed tag. Can someone help me with the JavaScript that will return the to start poster when the video stops playing. I had it working in Video.JS but can't find the right code for standard HTML.
Here's the current code and I cleared out the JavaScript since it wasn't working anyway.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="testimonials" width="448" height="336" controls preload="auto" poster="https://dl.dropboxusercontent.com/u/236154657/video-splash-image4.png"
data-setup='{"example_option":true}'>
<source src="https://dl.dropboxusercontent.com/u/236154657/WK%20Life%20Coaching%20Video%2012.13.mp4" type='video/mp4'>
</video>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
</body>
</html>
The easiest way I have been able to find is to reset the source of the video on the ended event so that it returns to the beginning. The other way to handle it would be to have a div with the poster image in that you swap out for the video, but this is simpler...
<script>
var vid=document.getElementById('testimonials');
vid.addEventListener("ended", resetVideo, false);
function resetVideo() {
// resets the video element by resetting the source
this.src = this.src
}
</script>
A f'up to my above comment: The onended event fires only after the video player has expended its content, and gone to black. So between the end of video and the poster, we see a black flicker.
To prevent the flicker, I simply ran the video to near its end, then called .load() to park the player back onto the poster:
<video ontimeupdate="video_time_update(this)"
poster="/ourMovie.png">
<source src="/ourMovie.mp4" type="video/mp4">
</video>
...
function video_time_update(video) {
if (video.currentTime > 3.3) {
video.load(); /* parks the video back to its poster */
}
}
Note that we know our video is 3.4 seconds long, AND we don't mind missing the last few frames. video_time_update() is lazy, and does not call for every tick.
And note that those of you serving videos of unknown duration might need this.duration instead of 3.3, there.
Please go through the link below with realated infor:
Redirect html5 video after play
<script src="text/javascript">
// Do not name the function "play()"
function playVideo(){
var video = document.getElementById('video');
video.play();
video.addEventListener('ended',function(){
window.location = 'http://www.google.com';
});
}
</script>
<video controls id="video" width="770" height="882" onclick="playVideo()">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
Hope this helps.
Below its working 100%
<script type="text/javascript">
function skip(value) {
var video = document.getElementById("Video1");
video.addEventListener("ended", resetVideo, false);
video.currentTime = 0;
video.currentTime += value;
video.play();
function resetVideo() {
video.load();
}
}
</script>