I'm trying to find a way of knowing when a Youtube video on an iPhone enters/exists fullscreen inside an HTML page. I am using Safari Mobile, not a UIWebView, the videos automatically go fullscreen as soon as they start playing.
Being obviously not on the youtube.com domain I cannot bind the webkitbeginfullscreen and webkitbendfullscreen on the <video> element within the iframe.
Is there any technique, even hacks, allowing me to query the video fullscreen state?
I think you'd have to detect iPhone or iPod user agent and then if the time changed on the video (via YouTube Javascript API) then you would have to assume it was playing.
Although, that only gets you equivalent beginfullscreen event reliably.
Related
We have a UIWebView that load html page including video tag. When the user tap the video element, a fullscreen movie player is presented.
As there is some logic in the web page that handle events and need to stop and close the movie player. Is there any API to do so (stop the web movie player and exit fullscreen)?
Any one know how to do this?
Further more, even we want to detect tapping on the video element, then we'll have to provide our own custom player, instead of the system web player. Any way to do it?
Thank you!
This might be helping, if you want to controll the HTML5 video with js: http://www.w3.org/2010/05/video/mediaevents.html
I am not shure if - on a mobile device - javascript will be running while the video is in fullscreen mode.
I have created a web page that auto plays a full screen background video.
On top of the video is a div that contains text & a link to an external site - this works fine in all desktop browsers.
How do i recreate the same setup to play on mobile devices - would I need to use javascript in order to achieve this?
I have spent many hours trawling google for a definitive answer and am now very confused.
Thanks in advance.
Autoplay for HTML5 video is not allowed on mobile devices such as iOS or Android. You can read this for the whys and hows on iOS.
On iPhone the video plays in the default (fullscreen) Quicktime player. So there is no real background notion (this could be accomplished in a native app where inline playback of video is allowed but not in the Safari/web browser). You would need to stick to an image I guess.
On the iPad or on Android in order to accomplish what you want you will need to bind your video tag to a touch event/button (like when a user 'touch' to enter your site), and on this event initiate the play sequence for the video (in your case the video being set to occupy the full width and height of the viewport).
Thanks
When I go to m.youtube.com on my iPhone (Chrome) to watch videos, I assume that YouTube is using the HTML5 <video> tag to display them.
However, when I watch a video with a commercial, dragging the seek button makes it jump back to it's original position before the seek. In other words, it is impossible to control your position in the commercial.
It feels like a violation of the divide between browser content and the browser. This isn't a native app, it is a website. How are the iOS video control elements being manipulated by HTML? It seems that this should be impossible, just like it should be impossible for a webpage to access a phone's photos or switch applications.
If it's running inline in the browser, the site will have full script access to the controls - and it's very standard nowadays to prevent skipping/changing the playhead during ads. Some even get rid of the controls completely.
Though HTML5 video is a native browser function, it's still subject to javascript hooks. All one has to do is add return false to the onChangePlayhead event to lock the controls down. It's only when you remove the video from inline web and bring it into the native iOS app that it becomes untouchable by scripts.
I have a web app that is using Youtube videos embedded via iframes into a modal dialog window. In Safari on the iPad 3, iOS 5.1, the video plays properly the first time it's loaded. However, if the modal is hidden and then re-opened, the video will no longer be able to play. The player will display, but it's simply a black space with no controls. The YouTube watermark still appears, and can be clicked on.
The play button in the Safari control panel will play the audio of the video from where it left off, but the player still won't display any video.
The "related video" suggestion images will appear once the audio reaches the end, and then the video can be replayed normally.
Does anyone know what's causing this behaviour? The embedding works as intended in all major desktop browsers, and is fine the first time in iOS. It's only when it's reopened in iOS Safari that it fails.
I'm trying to create an HTML5 video player to automatically start streaming video. I searched a lot but I didn't achieve my goal.
Then I found www.filmon.com, where all videos start to play automatically on iPad.
Does anyone know how they did it? I looked at their JS files, but I cannot make mine start automatically.
Apple has specifically disabled every method and workaround to autoplay video on iPads and iPhones (the "autoplay" attribute, and Javascript solutions like triggering hidden link's "onclick" event).
I have yet to find a way to autoplay on iPads and it looks like Apple is continuing to squash all efforts to do it. They state, "In Safari on iPhone OS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, autobuffering and autoplay are disabled. No data is loaded until the user initiates it."
As a quick update I just checked out Filmon.com and the videos there no longer seem to be autoplaying on an iPad. Example: http://demand.filmon.com/distant-roads-173-cnd-ontario-ca-1 autoplays on Chrome, but not on the iPad.
I don't think that iphone or ipad play streams automatically due to high traffic.
Why don't you play it manually using script at document ready?
somewhat like this:
window.onload=function(){
var audio = document.getElementById('audio');
audio.play();
}