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.
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/
I am developing a website and I am using a video as my hero container in my main page. The video is set to autoplay as soon as the page loads. On IOS low battery mode, I found out that it stops video autoplay in order to save battery life. What are my possible solutions to fix this problem.
The play button is shown on the video. Is it possible to force the video to play or even hide the playbutton of the video?
Is there any event listeners that work aside from suspend because that did not work for me.
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.
Safari and Chrome is not allowing video to autoplay if sound is on by default (unmuted). If you mute the video, it will autoplay, and the user is forced to enable sound. Fine and well, I can live with this.
However, in researching this, I found that YouTube (Safari 11, MacOS High Sierra), is allowing subsequent videos to be played with sound ON if the user turns sound on for a given video. Likewise, if user mutes the video, clicks onto a different video, this video will autoplay muted until user toggles the sound on. I would love to replicate this on a site in which I have created a video gallery of sorts. Each video does live on it's own page, and navigating the gallery will take user to a new page in the browser. This needs to stay the same, for multiple reasons (as opposed to creating a single media element and dynamically changing video source).
Alternatively, is there a way to convince Safari that a user has intentionally clicked a button in order to watch a video, thus allowing autoplay with sound on, when the user is simply clicking a link (in the form of a "Play Video Now" button) to a page with the video embedded?
Alright, I'm working on one project which involves html5 audio, in addition to that a video is shown while audio is playing (Just video, no controls etc). Video is a visualisation (sometimes called equaliser) of audio that is playing, made beforehand in adobe after effects. both files (video and audio) are same length e.g. 3 min 20 sec. I need a way to synchronise both, as video might load slower than audio or vice versa. Therefore I need to make it so that on computers with slow internet connection if video stops loading at some point and starts buffering I need to pause audio, and once video resumes start audio again, both at exactly same time, also when user skips to a certain bit in a song, video should skip to that bit as well, I'll use custom api made player for video so there would be no controls on video, only on soundcloud player.
It is almost as if I was using soundcloud custom player to control video. I'm struggling to find any resources on this anywhere, and would really like to know how to achieve this functionality.
javascript or jQuery solutions are preferable.
What makes it even more complicated is that I use SoundCloud's custom player to play songs:
http://developers.soundcloud.com/docs/custom-player#
And upload videos to Vimeo/YouTube (all done to decrease load on a website)
Check here: http://html5demos.com/two-videos
The sample is for syncing 2 videos, but with some hacking probably you can manage to sync audio and video.
Second, don't use Custom player, make your own HTML5 Audio element, check the SoundCloud API there is a property stream_url for every streamable track on soundcloud, just put that URL as source on your html5 audio tag.
Keep on mind that this will not work on Firefox and Opera for some time. Firefox will integrate native mp3 support in v20, not sure about opera