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
Related
My research tells me that there is now way to escape fullscreen video viewing in iOS browsers on iPhone or iTouch. It also seems there there is no way to modify the native controls that are displayed along with the video. Is the user in a total blackbox while viewing video in this case?
I'm trying to find someway for a user to indicate that they like a video as it is playing. Is there anything I can do that isn't a hack? If not is there any indication from Apple that they will ever be willing to change this? I'd rather not make an app out of this project.
You actually can play a video in line on an iOS browser, if this is what you are aiming for although there are restrictions - updated answer:
Play video inline in a browser on iOS
Safari on large screen iOS (iPad) should support inline video (I don't have iPAD hand to verify this still works...).
Safari on 'small screen' iOS (i.e. iPhone) will not support inline video as standard. There is at least one workaround which will allow it but this does bypass much of the native video playback performance gains so it may not meet your needs. It is a work in progress still as you will see from the link, but try the demo on an iPhone browser - you need to hit the small play button beside the video, rather than the one on top of the video at the time of writing:
https://github.com/newshorts/InlineVideo
Playing inline in a UIWebView on iOS
Take a look at this Apple Developer page:
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIWebView_Class/index.html#//apple_ref/doc/uid/TP40006950-CH3-SW31
In particular:
allowsInlineMediaPlayback
A Boolean value that determines whether HTML5 videos play inline or use the native full-screen controller.
and:
Discussion
The default value on iPhone is NO.
In order for video to play inline, not only does this property need to be set on the view, but the video element in the HTML document must also include the webkit-playsinline attribute.
As I keep reading, there is no way to enable HTML5 video autoplay in iOS browsers.
So why does my older iPad (with iOS 8) autoplay this introductory video from e.g., http://www.apple.com/ipad-air-2/ ?
When inspecting this on desktop Chrome, I pause at a certain point and see that a script inserts a <video> element with a mp4 file, then removes it after animation finishes. I've examined their script file as well, but did not find a definite answer to this.
I wish to clarify that I do not initiate any action other than opening the url. I have purposefully avoided every contact (no tapping, touching, etc.).
Could someone with more video experience explain this?
This question has been answered to me in a different place, so if someone stumbles upon this later on...
The short answer is that Apple does not show a video on a device such as iPad. They flash a series of JPEG images like a filmstrip, making it appear as though a video is being played. For a desktop browser, they would show a video file though.
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.
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'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();
}