I would like to play a sound on a load of an HTML page. First I tried this solution:
<audio src="static/audio/lang/pchwcafckzdmfcvuneezavatquflye_en.mp4" id="my_audio" loop="loop" type="audio/mpeg"></audio>
<script type="text/javascript">
window.onload=function(){
document.getElementById("my_audio").play();
}
</script>
It did not work. Then I have tried this one:
<audio src="static/audio/lang/pchwcafckzdmfcvuneezavatquflye_en.mp4" id="my_audio" loop="loop" type="audio/mpeg"></audio>
<script type="text/javascript">
var sample = document.getElementById("my_audio");
sample.play();
</script>
This does not work as well. In have tried to load the page in Chrome as well as Firefox. In both browsers if does not work.
What am I doing wrong?
Autoplay with sound is disabled and policies updated in Chrome and Firefox
Check these articles:
Autoplay policy in Chrome
Audio Autoplay in Chrome
Chrome autoplay policy changes
Autoplay guide for media and Web Audio APIs
Related
Is this bugged or something? please help me. I am coding a website but it doesn't work. I use Google chrome. Is there a compatibility issue?
<audio autoplay id="myaudio" allow="autoplay">
<source src="http://soundbible.com/mp3/Fuse Burning-SoundBible.com-1372982430.mp3.mp3" type="audio/mpeg">
</audio>
<script> document.getElementById('myaudio').play(); </script>
looks like your URL in the isn't working. Remove one .mp3 and it should work for you.
<audio autoplay id="myaudio" allow="autoplay">
<source src="http://soundbible.com/mp3/Fuse Burning-SoundBible.com-1372982430.mp3" type="audio/mpeg">
</audio>
<script> document.getElementById('myaudio').play(); </script>
If you look at the console when on you browser where your your snippet is running you will be able to see the following error:
Failed to load resource: the server responded with a status of 404 (Not Found)
404 error indicate that the client was able to communicate with a given server, but the server could not find what was requested.
In your case the server couldn't find the specified mp3 file. Looking at the code you have and extra .mp3 in your url so removing that will fix your issue.
<audio autoplay id="myaudio" allow="autoplay">
<source src="http://soundbible.com/mp3/Fuse Burning-SoundBible.com-1372982430.mp3" type="audio/mpeg">
</audio>
<script> document.getElementById('myaudio').play(); </script>
I saw a question like mine on this page: How to play video from google drive using javascript?
However, I have a question. For some reason, this answer from that question:
Google provides some GET-params like export and id with google-drive:
?export=download&id=YOUR_LONG_VIDEO_ID
to give you the ability to insert an uploaded video into a HTML5-video-tag.
This should work:
$("#play").click(function() {
$("#video")[0].play();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="play" style="margin-top: 300px;">Play</button>
<video id="video" width="320" height="240" controls>
<source src="https://drive.google.com/uc?export=download&id=0B8-qLYDzDfCyRF9vOE9sWmx5YjA" type='video/mp4'>
Your browser does not support the video tag.
</video>
Works well when I test it out on the w3schools tryit:
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_show_hide
I switched that code for my code, I just use it as my practice area.
But when I place my own video in with the same formula, just switching the original google drive video with my own, my video controls are greyed out and clearly can not play the video. My original video is uploaded on my google photos, put in a named folder on my google drive, where both folder and video are open to anyone with the link access.
I don't understand why the original video works fine, and mine doesn't. It's frustrating because I know using this way of putting a google drive video into the video tag allows me to use my custom controls to control the video. But something is going on with my video for some reason.
Here is my code with the original one, you'll see it's the same.
$("#play").click(function() {
$("#video")[0].play();
});
$("#play2").click(function() {
$("#video2")[0].play();
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="play" style="margin-top: 300px;">Play</button>
<video id="video" width="320" height="240" controls>
<source src="https://drive.google.com/uc?export=download&id=0B8-qLYDzDfCyRF9vOE9sWmx5YjA" type='video/mp4'>
Your browser does not support the video tag.
</video>
<br>
<br>
<button id="play2" style="margin-top: 300px;">Play</button>
<video id="video2" width="320" height="240" controls>
<source src="https://drive.google.com/uc?export=download&id=1hLjl0TDEOnPrgXhFxAVNL5fM_qLtCgB9lA" type='video/mp4'>
Your browser does not support the video tag.
</video>
Lots of help will be GREAT!!!!!!!!
According to me, there is permission problem with your drive video.Because I have tried to hit on your link I am getting error of permission. But previous drive's video((working fine)) easily accessible.
Go to your video in Google Drive.
Right-click and select get shareable links, then change your sharing setting to 'On - Public on the Web'.
Refer Image for sharing setting
I would like to autoplay a small video on chrome with data saver enabled. When the data saver is enabled chrome is blocking all html5 autoplay and play initiation via. script.
<video autoplay muted controls>
<source src="file.mp4">
</video>
Nevertheless there are some html5 players which still work. So it is possible and the question is how.
For example https://www.cb-1100.de/forum/viewtopic.php?f=27&t=1144 (below the first post)
I'm developing a site in which I want to play video in background. Following is my code, video is playing in Internet explorer but not in Chrome. I'm using 2.2.4 version of jquery and I cannot change it because my all site is developed and If I change jquery than my whole site stops working.
<video id="vid" width="110%" height="100%" autoplay controls loop muted="muted">
<source src="../img/led.mp4" type="video/mp4" />
</video>
Thanx in advance.
I'm currently trying to incorporate a full screen video BG in my home slider (via Revolution SLider, a WP plugin which supports HTML5 video).
The video loads fine in FF and Chrome, but I get nothing but the loading .gif and a black screen in Safari - I've got both .mp4 and .ogv available and linked, so I know the correct format is there.
Any ideas/solutions would be massively appreciated!
Use the specific video format safari uses.
<!doctype html>
<html>
<head>
<title>Multi-Scheme Video Player</title>
</head>
<body>
<video controls autoplay >
<source src="http://HttpLiveStream.m3u8">
<source src="rtsp://LegacyStream.3gp">
<source src="http://ProgressiveDownload.m4v">
</video>
</body>
</html>
Here you will find things properly about video support by particular browser CLICK HERE