How to fix audio not auto playing when page is loaded? - html - javascript

I'm trying to play an audio when page is loaded, it should be really simple however i can't accomplish it.
The problem is that it is not playing, i tried checking the state of autoplay (True/False) and it says it does playing when page is loaded although it does not, also tried making a function which will change the auto play state to True but it didnt do anything ...
<html>
<head >
<audio controls autoplay id='myAudio'>
<source src="..//sounds//firstpagesong.mp3" type="audio/mp3">
<source src="..//sounds//firstpagesong.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</head>
<body onload="tryy()">
<p id="demo"></p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = document.getElementById("myAudio").autoplay;
document.getElementById("demo").innerHTML = x;
}
function tryy()
{
var audio = document.getElementById("myAudio");
audio.autoplay = true;
audio.load();
}
</script>
</body>
Also looked up for similar question here and tried thier solution as well but none of them worked.

I'm trying to play an audio when page is loaded, it should be really simple...
Yeah, well, it isn't. Autoplay with sound is largely disabled in all mainstream browsers these days.
See also: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Related

Onload audio worked but now doesn't

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.

Unable to play audio automatically but if manually click a button, it works

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()">

Notification sound not working on mobile browswer's

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

Prevent Blackout when changing video in html5 video tag

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>

HTML5 Video Embed Return to Poster at End of Play [duplicate]

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>

Categories