HTML5 Video Autoplay on Mobile Devices - html

The question is not "Is it possible"? I know the mobile browsers can not autoplay html5 videos but, here i have an example of autoplaying.
Please explain to the world how is possible that!
Here the example: http://misc.teads.tv/us/demo/InReadWeltDemo2/index.html#232943677
And now? ;-)

You probably might have found this by now. But if not, then that video is triggered by the user's touch (window.touchStart) event. As soon as the user touches the screen to click/scroll, the video element's .play() is triggered.
You could try opening the url in any mobile-browser that does not support touch events to see that the video does not play until you click on it.

Related

How to autoplay audio in Chrome (Angular)?

I have to implement a sound notification and I just can't get audio to play on Chrome if the user hasn't interacted with the page.
I have tried workarounds like:
adding iframe with a dummy audio file,
using ViewChild with the play() method,
even using a click() on a button and then trying to play() method again.
None of these seem to work. The only result I had was when the user interacted with the page, but if he refreshes the page and doesn't interact with the page, no sound will play which beats the purpose of the audio notification.
Autoplay seems to not have any problems with Edge, anyone know a good workaround for Chrome?
Stackblitz exemple of my implementation is here
You can't.
Your page does not have a high enough Media Engagement Index to enable autoplay. You can debug this at chrome://media-engagement.
See also: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#mei

HTML video autoplay without muted (or how does youtube do it)?

I know that many newer browsers now disable autoplay when the video isn't muted or mute it and then play. Without user interaction it's also not possible to call play on a video. That's understandable, but I'm wondering how youtube is still able to start the videos with sound.
I checked and they do use the video tag, just not with any autoplay/muted attributes and loading some blob. It's not the user interaction opening the video, it also starts when opening a link in incognito mode.
So my conclusion, it should still be possible. But how? Or did browsers add some kind of exception for trusted video streaming sites?
Thanks in advance
For the Youtube case, it is probably a pre-populated white list
https://blog.google/products/chrome/improving-autoplay-chrome/
If you don’t have browsing history, Chrome allows autoplay for over 1,000 sites where we see that the highest percentage of visitors play media with sound.
For other generic cases, you can refer to the following rules (for Chrome at least)
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
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.

HTML video tag autoplay in Safari without user interaction

I have autoplay in the video tag, but it still requires mousing over it. From what I read it's because it requires user interaction to play the video, so users won't be annoyed by videos playing without their consent. Is there a way to get around that or fake the event well enough to fool the browser?
No. And if there was a way to fool it, Apple would just close that loophole on the next release.

ios 10 youtube iframe not playing

I'm using the following iframe in my HTML code:
<iframe src="<iframeurl>">?autoplay=1" frameborder="0" allowfullscreen></iframe>
On iPhone with iOS10 this doesn't autoplay. I'm getting the red play button and stuff. On windows chrome and others all works fine autoplay starts correctly. But not with the iphone.
Is there anything I could do in javascript or by manipulating the URL to make this autoplay? I'm aware that Apple used to disallow autoplay before iOS10 so maybe I'm doing something wrong here..
You're experiencing this because Apple doesn't allow embedded media to play automatically — the user always initiates playback.
This is mentioned in YouTube's IFrame Player API documentation as well. And no, I don't think you can and should override this since that is a bad practice.
Just add the play trigger to onClick and then execute call the click event from an AJAX response.
Should do the trick ;)
It is not that iOS prevents any video from autoplaying (at least not so since iOS 10), but it is unmuted videos that are prevented from playing without user interaction. So if you embed a YouTube video with muted=1 appended to the URL, autoplay works again.
P.S. the muted parameter is not documented for the YouTube embedded players. It is nowhere to be found in the official doc: https://developers.google.com/youtube/player_parameters. Yet it has been working for quite a while. If you worry it may not work someday, you can take the programmatic approach via the iframe API: first mute the video and then play it when the ready event is emitted.
putting this in config.xml worked for me:
<allow-navigation href="*://*youtube.com" />

Audio tag auto play not working in android browser

I created an audio player dynamically with autoplay enabled. But it is working with desktop browser not in android browser. And progress handler not dispatched.
If I enable the controls attribute and click the play button it will dispatch the progress handler and playing the audio. Even I was tried to play by manually by calling the play() method.
I want to play the audio once canplaythrough handler triggered.
Audio on mobile devices often requires a user event (click / touch) in order to play, which seems to be what is happening in your case.
You can check out the SoundJS Mobile Safe Tutorial to learn more about the issue and a couple of ways to work around it.
Hope that helps.