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" />
Related
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
I attempted to add a Hero background video to our website. It's being served from mux.com.
I use it with HLS, but for Chrome it uses Media Source Extensions from what I gather.
I know that for HTML5 video to auto play, it has to be muted also, and I have both parameters over there.
Apparently, on Android Chrome I get behaviour where it freezes on the first frame (black), but doesn't continue and I cannot trace why.
In case of freezing, it still does load the video, just that it's not getting autoplayed.
I am out of clues.
Isolation sandbox:
https://codesandbox.io/s/32yky6x7mq
https://32yky6x7mq.codesandbox.io/
In my attempts, I have reduced this down to simple HTML app with Hls.js library and basic <video> tag where it breaks on mobiles.
How do I get the video to autoplay on mobiles?
P.S. To see exactly what I have tried, please see edit history, as I have been trying lots of things.
On my device specifically, Android Chrome, it's caused by Data Saver.
Disabling Data Saver, the video autoplays.
It's paradoxical, because with Data Saver I expect for the video to not be loaded at all, but it's getting loaded and the autoplay gets interrupted instead - resulting in more waste.
Possibly, there are other settings out there in the wild that prevent autoplay, for instance, couldn't find the exact reasons why iOS is not working. There are hints about playsinline attribute, which I have not tested yet. (Will update when I do)
Worth noting, is Feature-Policy header too: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
It didn't help me in my scenario, but it can probably be related with autoplay in other scenarios.
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.
I would like to embed a youtube video (with the standard iframe). Can I ensure that the video is played in the youtube app, if it is clicked on using a smartphone?
For completeness my video including code (using bootstrap 3.3.1.):
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/<?php echo $Elem->video; ?>">
</iframe>
</div>
Thank you
I'm just trying to do the same thing and I can tell you that there is no native way to specify that behaviour as a parameter.
The only workaround (I'm still trying to implement it) is to use YouTube's Player API for iframe. I think you should use that API to embed the video on the webpage and add a listener to the first "play" event, in that event you should check if the user is using a mobile device (using another JS library to check that) and stop the playback (the stop() API call will also stop the loading of the video file) and then redirect the user to the video URL (like youtube.com/xxxxxx). At that time, at least in Android, the user will be asked to open the link in the browser or the YouTube app. I think most user have the app as the default option.
That's the idea, I'll try it and if it works will edit this response with the code I've used.
This is the link where you can read about embedding the player, it's events and API calls: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
YouTube iOS8 Media Load Issue - Media plays successfully while in Safari, but when the app is loaded from a Home Screen web clip, playing the video fails.
Moreover, tapping a link to navigate away from the page while the media is failing to load results in a complete crash of the app to the Home Screen.
Here is a link that demonstrates this (obviously run on your iDevice). You can run it initially in Safari browser, it'll work fine. Install it as a home screen icon, playing video will fail, and clicking the bottom link will crash the app.
http://nterspace.com/youtubeissue.html
The code that works when the app is loaded up in the Safari browser is:
<iframe width="100%" maxwidth="432" height="270" src="//www.youtube.com/embed/_j4KrMAygJI" frameborder="0" allowfullscreen></iframe>
Anyone have any thoughts? Is this bad embed code?
Today, April 09, 2015. Finally , this issue is partially resolved. After updating to version 8.3 my webapps returned to work again for the dailymotion and vimeo videos. Youtube videos are now redirecting to the native application, which is very annoying.
EDIT:
As the youtube videos was redirecting to the native application , I had to use the youtube url as follows:
<iframe width="100%" height="300" src="https://www.youtube-nocookie.com/embed/hdjL8WXjlGI?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
So my users can watch the video without having to leave the webapp.
For some reason the nocookie option does not redirect. Let's hope that this will be completely fixed in the next iOS version.
I am having the same issues!
This is an issue particular to IOS8. Please see: https://discussions.apple.com/thread/6558443 Hopefully Apple will fix this issue soon. Another issue arising is unable to use Play button:
The Play button on a youtube embed does not work on android-chrome
UPDATE: They have fixed the PLAY button ISSUE!
It was still broken on 8.3 for me, but it turned out it was because there was an <input type="search"> element on the page (bizarre). Made a video: https://www.youtube.com/watch?v=rrKxAIXnydE
iOS 8.3 fixes the bug. Videos are now playable from homescreen webapp, including from appcache.
source:
Just tested this on iPad with IOS 8.1.3 - still broken.
sneuf's iframe works for safari pages but not when loaded from home screen (web clip).