I have multiple iframes on a page that when they start to play they automatically go fullscreen on mobile. I am using the youtube api to load the videos and have a "cover" image over the top with a custom play button. On mobile, when the user clicks the play button the cover image disappears and the video goes fullscreen and starts playing - so far so good. But what I need to be able to do is that when the user clicks 'done' the video leaves fullscreen (which it does) and the cover image comes back up (which it currently doesn't). The problem is that I cant seem to detect when the user clicks 'done'.
I've tried using:
$('iframe').bind('webkitendfullscreen', function(){
// code in here shows the cover image but even just a standard alert isn't firing.
$('#coverImage').show();
});
No matter what I do the webkitendfullscreen isn't firing. Is there no way to detect when an iframe is done on mobile?
any help/pointers appreciated!
According to the answer from powtac from this SO post:
You can not interact with iframes which are not under the same domain.
This is always prevented by the browser's policy.
I think from this SO post you will have a hint on your problem.
You can check this SO post as well.
Related
Is it possible to make an external play button for a video without the play button in the video?
For example when you want to start a youtube video you see a red button in the middle of it. I want that hidden and a button outside of the video to start the video. It doesn't matter what video player it is.
I want to do this because iPad does not allow autoplay. And using the external button I want to trick it to autoplay.
This is a website that does "autoplay" on the iPad.
http://24hoursofhappy.com/
There is a reason why YouTube doesn't allow autoplay on mobile/tablet devices, video's use up alot of bandwith which may become expensive for the user.
U can trick it like u mentioned with a custom play button or even force it to start playing without a custom button. There is alot of detailed information on YouTube's API page.
Check out this page: https://developers.google.com/youtube/
I'd refrain from always autoplaying a video though if not just for bandwith reasons. In your case u could check if the device is a tablet.
I finally found an answer for this using HTML5 videos. It allows me to use the control buttons externally so I can use an overlay and hide the overlay when the play button is clicked so it will seem like it is auot played.
When I set up a youtube player in an iframe in the normal way ( like this https://developers.google.com/youtube/youtube_player_demo ), and make a new html element (button) positioned over the top of youtube's iframe, any touch of the video player seems to be "caught" by the video controls so the user cannot tap the button I've made.
Removing the controls with the parameter "controls=0" solves the problem, and the user is able to tap the button. However, I need to find a way around this whilst leaving the controls on - at the moment the only option I can see is building my own controls overlay on top, which is not desirable. The fact that youtube seem to be able to grab and not grab the touch interaction would seem to prove that it is possible in some way with the JavaScript.
-not a problem on Android tablets.
Thanks in advance to anyone who can help!
According to this other SO post, limitations exist on iOS, where "...embedded media cannot be played automatically/programatically in Safari on iOS - the user always initiates playback."
I'm trying to get it understand but after 2 days of digging the code I thought that I will post my issue here...
According to Apple's documentation, autoplaying videos on iOS devices cannot be done without user interaction first (e.g. tap on video). Despite that, mobile YouTube (m.youtube.com) is able to autoplay its videos just after loading a page with video.
Does anyone know how they are doing it?
PS. I've checked all available JS/HTML techniques of autoplaying videos on website on iOS (e.g. iframe, fake click, triggering touch event on video, fetching video with XHR).
I believe that youtube.com is a single page app. So when the user clicks on the video from the list view the page is not loading and their javascript uses that initial click, that leads to the video page, as the click that starts the video. It's not actually autoplaying, it's just a trick.
I am using oembed to work with some vimeo videos but I am having a few issues on mobile platforms.
For example, on Android, if I click on the video, the screen goes black and I have to tap again to get the controls to show then you can hit play.
When the video completes, it just sits there and you have to hit the back button.
Additionally once you hit the back button, the thumbnail of the video on the original page is grey and no longer shows the proper vimeo thumbnail.
so, I am having a host of issues and am not really sure where to start. Do I need to work with vimeo's javascript API to make the video behave how I want on mobile?
How do I make it autoplay on tap?
Can I make it automatically return to the page upon completion?
Any insight on the strange greyed out thumbnail?
If someone could point me in the right direction I would appreciate it.
So I've run into some problems implementing YouTube videos in popovers. I can get the YouTube video to play just fine, but when the user clicks off the popover (destroying it), the sound continues playing. My solution for this was to have the webview that was displaying the youtube video load a blank html string in the viewDidDisappear method, and this works great.
However, I am now running into an issue where if the user pushes the fullscreen button on the youtube video, the youtube video does indeed go fullscreen, but the popover is in front of it. This is annoying, but the user could normally just click some other portion of the screen and it goes away. I would be willing to live with this. Except of course.....that calls viewDidDisappear, loading nothing into the html, blowing up my entire application.
I was wondering if anyone knew how to load some javascript in the webview that could control the youtube video. In this way, I could have viedDidDiappear call the pause, so the sound would not continue playing when the popover is dismissed, and the youtube video would not blow up in full screen.
This is not the ideal solution (since the popover still sits in the way in full screen), but I will take it for now. If anyone could help with the javascript injection I would need, or suggest an even better solution, I would greatly appreciate it.