I am using mediaelement.js and am loading different content into the same player using something like
player.pause()
player.setSrc(newSource)
player.load()
player.play()
when a user clicks a button.
In IE9, I am experiencing the old video being shown for a full second or so before the new video starts being played. I understand the video has to load but in other browsers the player shows an interstitial loading overlay until the video is ready to be played.
Additionally I've tried to manually manipulate the overlays but cannot figure out (for the life of me) what event to hook into that truly marks the ability for the player to play the new video (when to lift the overlay).
I have tried hooking into "loadeddata", "canplay" events before calling player.play() and still experience the old video for a second or so.
I also want to avoid solutions that reinitialize the player.
Any help would be greatly appreciated! Thanks
Related
Since the YouTube API has no means of programmatically triggering fullscreen (apparently for good reasons, relating to legacy Flash support, as described here), I'm getting by just by using the HTML5 Element.requestFullscreen API to fullscreen the player IFrame.
Unfortunately, if a user triggers fullscreen in the YouTube player, then the player itself goes fullscreen instead of the IFrame, and doesn't produce any events to signal that it has done so. That breaks my UI and causes other synchronization problems when the rest of the application doesn't know what things are and are not fullscreen anymore. A partial solution is to use the chromeless player and then render my own player controls, so that users can't click the YouTube fullscreen button- but, it turns out that double clicking on a YouTube video will also cause it to enter fullscreen mode, again with no way of signalling the rest of the application that it has done so.
So, is there any consistent way of preventing an embedded YouTube player from going fullscreen under any circumstances, without impacting other functionality?
The best solution I have so far is to set pointer-events:none on the iframe. That's not quite perfect, however, as it also makes it impossible to dismiss ad banners displayed over YouTube videos. An ideal solution would block the "fullscreen on double-click" response, without messing up anything else. (Single-click to play, for example, is just fine, because the YouTube player does emit play events that let me keep the rest of the application in-sync.)
When embedding using the iframe tag, you can use the parameter fs = "0" to disable to the fullscreen button. See http://codepen.io/anon/pen/zvOqKJ
There is something weird going on with this. I was unable to prevent fullscreen when I passed in "fs: 0" with the playerVars as per this page
https://developers.google.com/youtube/player_parameters?playerVersion=HTML5
(even though some other player vars were making a difference)
God knows what's wrong, but I fixed it with:
var ourYT = document.getElementById('player');
ourYT.allowFullscreen = false;
Use this;
iframe {pointer-events: none;}
you can disabling click events on youtube player (play,pause,fullscreen);
I'm using HTML5 video tags in my webpage. I have a small "Watch Video" button that opens a modal displaying this video. Everything works as intended. I am, however, trying to determine what changes in the HTML document (or possibly the DOM?) when I hit the controller's play button.
The goal in determining this is to have the video begin playing automatically once the modal is revealed which I plan to do with a small JS script. Also, when I close the modal window, I will have it disappear.
I did a few Google searches and started to see people discussing creating custom controllers for these videos which I feel is unnecessary - I want to utilize/modify what is already in existence.
To summarize: What is happening when I hit the play/pause controllers in an HTML5 video?
The W3C has a handy <video> interface that shows how the properties and events on a video element change and fire as you interact with it.
As you can see from that demo, the major things that occur when you play a video are:
the video's paused attribute is set to false
the video emits a play event
If the video has preload value of "none" (as this one does), then the video will begin loading when the user presses play, which triggers a few other events, e.g, the canplaythrough event will eventually fire, the buffered attribute will continue to change as the video loads, etc.
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 have read that autoplay was not possible, or not advised on both iOS and Android (more on that here: no autoplay in iframe HTML5 player on mobile (Android Chrome and Firefox)?). But I was wondering if there was a way that would allow to replicate the same behavior, that is the video playing soon as the page is loaded.
I have tried preloading the video, and playing it once the DOM is loaded, I tried forcing a play soon as the video can be played, none of that work, it always result in the user having to tap the video to play it.
Can anyone help?
NB: I'm working with plain old JavaScript, no jQuery.
No, there is no way on iOS/Safari (or iBooks).
Videos load only in the context of an event handler reacting to user action such as a touch.
You're out of luck.
This has been documented extensively in any number of questions right here on SO, and is clearly documented by Apple.
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.