This is the PHP script I use to add the player:
echo "<audio id='my_audio' src='img/default-sound.mp3'></audio>";
And to play it I use this script:
<script>
window.onload = function() {
if (document.getElementById("my_audio") == null) {
alert("null");
} else {
alert("yay");
document.getElementById("my_audio").play();
}
}
</script>
The alerts is just for testing purpose. The issue is: When opening my page in Internet Explorer or Microsoft Edge, it all runs fine, the alert shows up, and the mp3 file is played once. But when opening with Google Chrome, only the alert shows up. Then, if I spam the page refresh button a few times, suddenly the sound plays. What might be causing this issue?
Read this https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Chrome's autoplay policies are simple:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
The user has added the site to their home screen on mobile or installed the PWA on desktop.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
enable/disable/set default auto-play settings (and many more)in :
chrome://flags
But it just works on the computer you configured it.
Related
I have a button that redirects to a youtube video, but the video is always loaded paused. I want the video to start automatically for various reasons (try the link out). Here is my code:
<input type="button" onclick="location.href='https://www.youtube.com/watch?v=dQw4w9WgXcQ'" value="Go">
I know this is a solution with the <iframe> element, but it should work for this as well. At the end of the url, try adding the this autoplay parameter ?autoplay=1
This is not working as simple as it did once in 2021.
Nowadays modern browser block autoplay Chrome as an example
But it can be done in other ways:
If you visit youtube developer site you can see they write
Chrome's autoplay policies are simple:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
The user has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
The user has added the site to their home screen on mobile or installed the PWA on desktop.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
Autoplay example
So with that knowledge an example of a video (your video link is not working anymore) having autoplay could then be to use the embed code and mute it: for example:
https://www.youtube.com/embed/sx_G-J3lOXM?autoplay=1&mute=1
I have a .webm video that I am dynamically setting as the source for the video tag.
vidPlayer = document.getElementById("player");
vidPlayer.src = videoPath;
The corresponding HTML:
<body>
<video id="player" class="video-player"></video>
</body>
This is working perfectly on the web browser but when I view this on my mobile, I get a white screen.
I checked the elements tab in the developer tools if different HTML was getting rendered, but it wasn't.
However, in the network tab for chrome web, there is a call made to fetch the video but the same does not happen for chrome android.
I am running this code on localhost.
Can anybody tell me what I am doing wrong or why this is happening?
So, apparently, if your video does not have controls enabled, then for mobile browsers, the user must interact(tap or swipe on the screen) for the video to be visible on the screen.
With controls enabled the video is visible from the start.
window.onload = function() {
document.getElementById("up").play();
alert("k");
}
<audio id="up" src="./res/up.mp3" loop="loop"></audio>
hi I've just began studying html&js, and the code above worked fine on IE, but only the alert happened on chrome. Is this normal?
This is because chrome throws an exception :
DOMException: The element has no supported sources.
"code": 9,
"name": "NotSupportedError",
"message": "The element has no supported sources."
Chrome has changed it's policy because blocking roughly half of unwanted media autoplays
READ : https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Reference :
The Autoplay Policy launched in M66 Stable for audio and video
elements and is effectively blocking roughly half of unwanted media
autoplays in Chrome. For the Web Audio API, the autoplay policy will
launch in M70. This affects web games, some WebRTC applications, and
other web pages using audio features. Developers will need to update
their code to take advantage of the policy. More details can be found
in the Web Audio API section below.
Chrome's autoplay policies are simple:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop,the user's Media Engagement Index threshold has been crossed,
meaningthe user has previously play video with sound.
On mobile, the user has added the site to his or her home screen.
Top frames
can delegate autoplay permission to their iframes to allow autoplay with
sound.
I have edited your code to display the error
window.onload = function() {
const playPromise = document.getElementById("up").play();
// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
playPromise.then(function() {
// Automatic playback started!
}).catch(function(error) {
console.log(error);
// Automatic playback failed.
// Show a UI element to let the user manually start playback.
});
}
alert("k");
}
<audio id="up" src="http://hcmaslov.d-real.sci-nnov.ru/public/mp3/Queen/Queen%20'Back%20Chat'.mp3" loop="loop"></audio>
This is a result of Chrome's autoplay policy, which restricts sites from playing audio before the user has interacted with the page.
In summary autoplay in Chrome is Not allowed by default since april 2018. This to protect the user for undesired sounds. More info.
But, if the user interacts with the page (by making a click for example), then yes it is allowed, so you can change the onload code to a click. Like this:
window.addEventListener("click", function(event) {
document.getElementById("up").play();
alert("k");
});
Click on the page, and walla.
Hope it helps.
i'm running a react js app that works perfectly fine on laptop but on the iphone the videos won't play even if you click them.
here is the code used to display the videos. I have no error in the developer console of safari either when clicking the video.
<video className='video1' loop autoPlay controls="true" width='50%' height='50%' src='leadmagic.mp4' type='video/mp4'></video>
Add an event click listener on your video tag and in it something like
$(".video1").click(function()
{
this.start()
});
If it doesn't autoplay on your phone it's probably that it isn't available on phone (On Android, I've got the same problem) to avoid the use of mobile data without the user's agreement
let's get down to the code:
I'm preparing the document with:
<video width="300" height="400" id="videoStage"></video><button onclick='video()'>Play video</button>
as for the JS function:
function video(){
var vid_url = "https://fbcdn-video-a.akamaihd.net/cfs-ak-ash4/v/82342/969/274169121921_63622.mp4?oh=99ef0d9285cbbd7adf8bc07a845dc0d1&oe=519E400F&__gda__=1369439362_83c7f900e92bdbaa201f49d35a7c144a";
stage = document.getElementById('videoStage');
stage.src = vid_url;
stage.play();
}
working code sample: http://jsbin.com/eviyel/1
this code works just fine and plays the video both on my desktop and my mobile device.
But(!) when the video() function is applied to document.ready - it only plays on my desktop and as for my mobile device it displays empty.
Any solution guys? 10x.
I found the answer myself:
Mobile browsers (such as chrome mobile and iOs's) must have a valid 'click' first to enable both video+audio playback.
Once that click as been achieved, the element that was used to play the video/audio is now playable.
You can now change the SRC of that element to play any new media source programmatically without having to click on the DOM once again.
Starting from iOS 10 autoplaying videos that are muted is allowed without user interaction:
https://webkit.org/blog/6784/new-video-policies-for-ios/
Android still seems to require user interaction, although it might be possible to use a touchend event from scrolling the page to start the video playback.