I would play an audio file (on loop) after I open my website.
I know browsers have restrictions about autoplay, but is it possible to autoplay any audio using JavaScript?
Thank you!
There currently isn't any guaranteed way; MDN has the following general guidance:
As a general rule, you can assume that media will be allowed to autoplay only if at least one of the following is true:
The audio is muted or its volume is set to 0
The user has interacted with the site (by clicking, tapping, pressing keys, etc.)
If the site has been whitelisted; this may happen either automatically if the browser determines that the user engages with media frequently, or manually through preferences or other user interface features
If the autoplay feature policy is used to grant autoplay support to an and its document.
Otherwise, the playback will likely be blocked. The exact situations that result in blocking, and the specifics of how sites become whitelisted vary from browser to browser, but the above are good guidelines to go by.
Current policies of Chrome and Safari are that you can not just play audio once the page has loaded (unless it's muted).
Chrome has the following policies:
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.
Safari has the following guidance regarding autoplay:
Websites should assume any use of or requires a user gesture click to play.
It’s important to detect if auto-play was denied, since users now have the ability to turn off all forms of auto-play, including silent videos.
Auto-play restrictions are granted on a per-element basis.
Related
My app used to be able to play videos with sound inside a PWA environment using the YouTube Iframe API, but in the last few days this is only achieved if there has been a user gesture before. Playing the video muted is allowed, also no errors are produced in the above process.
This is not allowed anymore in Chrome:
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.
Source: https://developer.chrome.com/blog/autoplay/
Many browsers have policies that block autoplaying videos. See for example: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Let's say there is a workflow similar to the following (I know it seems contrived, but it's the best option at this point, I can go into detail why if anyone is curious):
User clicks on an iframe video to play it.
The iframe sets a cookie to set it to play after an iframe refresh (window.location.reload())
On reload, the player reads the cookie, and plays the video.
Would any browsers see this as an autoplay and potentially block the video from playing? Or would they recognize the iframe as having been interacted with, and not block this playback?
I'm mostly curious about Safari, though other browsers like Firefox and Chrome would be of interest as well.
Thank you!
I am trying to make an HTML5 video autoplay (in muted condition) in the popup in the page. The popup is hidden when page is loaded. When user tries to go out of page (from top), it shows video popup with AutoPlay & muted ON. Then I tried to play video with JavaScript but it gives this error: play() failed because the user didn't interact with the document first.
It works fine if I click somewhere on page or if developer panel is open before the video popup is displayed. I am using Flow Player, and issue only in Google Chrome (works fine on FF).
Can you please give any ideas on how to overcome this?
Thanks, J
Google Chrome has updated the autoplay policies.
URL for reference
According to new behaviours:
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 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 am using JWPlayer for my videos on my site. What I want to achieve is to autostart videos unmuted. I have autostart feature on but the videos start muted.
The thing is I have playlists which directly refreshes the page instead of changing the video (i have to work this way). Whenever the page changes, the video starts automatically but muted just as before.
Is there any trick that I can autoplay videos unmuted on mobile browsers?
Thank you in advance!
The limitation is related to HTML5 videos, not just the JWPlayer - for various reasons video autoplay on mobile devices has historically been limited or restricted.
This was typically to avoid excessive bandwidth charges for users and also to avoid annoying users by having a video or audio suddenly play unexpectedly for them.
The restrictions are different for different platforms but it is fair to say that most platforms have eased the restrictions in recent years and autoplay of muted video is often supported now. Autoplay of united videos on mobile devices is still generally not allowed.
You can see the summary of Webkits policies for iOS as an example here: https://webkit.org/blog/6784/new-video-policies-for-ios/
There is a specific focus on the audio track - e.g.:
video elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
video muted elements will also be allowed to autoplay without a user gesture.
If a video element gains an audio track or becomes un-muted without a user gesture, playback will pause.
I have to play video (HTML5) on iOS in autoplay mode, but for that we need to set webview.MediaPlaybackRequiresUserAction as FALSE.
Is there any way to check the value of webview.MediaPlaybackRequiresUserAction=FALSE or TRUE, using JavaScript?
I think it is not possible as apple doc say
User Control of Downloads Over Cellular Networks
In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it.
ref:- http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
autoplay will work if you also set muted, the problem is as soon as you turn off the mute, the video stops.