I've built a web app that uses the HTML5 tag and JavaScript code that renders other content synchronized with the running video. It works great in desktop browsers: Firefox, Chrome, and Safari. On an iPhone or a DroidX, the native video player pops up and takes over the screen, thus obscuring the other dynamic content that I want to display simultaneously with the video.
Is there any way around this? If necessary, I'll figure out how to write native apps for both those platforms, but it would save me a ton of effort if I could just stick with HTML5/JavaScript.
In iOS 10+
Apple enabled the attribute playsinline in all browsers on iOS 10, so this works seamlessly:
<video src="file.mp4" playsinline>
In iOS 8 and iOS 9
Short answer: use iphone-inline-video, it enables inline playback and syncs the audio.
Long answer: You can work around this issue by simulating the playback by skimming the video instead of actually .play()'ing it.
There's a property that enables/disables in line media playback in the iOS web browser (if you were writing a native app, it would be the allowsInlineMediaPlayback property of a UIWebView). By default on iPhone this is set to NO, but on iPad it's set to YES.
Fortunately for you, you can also adjust this behaviour in HTML as follows:
<video id="myVideo" width="280" height="140" webkit-playsinline>
...that should hopefully sort it out for you. I don't know if it will work on your Android devices. It's a webkit property, so it might. Worth a go, anyway.
Old answer (applicable till 2016)
Here's an Apple developer link that explicitly says that -
on iPhone and iPod touch, which are small screen devices, "Video is NOT presented within the Web Page"
Safari Device-Specific Considerations
Your options:
The webkit-playsinline attribute works for HTML5 videos on iOS but only when you save the webpage to your home screen as a webapp - Not if opened a page in Safari
For a native app with a WebView (or a hybrid app with HTML, CSS, JS) the UIWebView allows to play the video inline, but only if you set the allowsInlineMediaPlayback property for the UIWebView class to true
In iOS 10 beta 4.The right code in HTML5 is
<video src="file.mp4" webkit-playsinline="true" playsinline="true">
webkit-playsinline is for iOS < 10, and playsinline is for iOS >= 10
See details via https://webkit.org/blog/6784/new-video-policies-for-ios/
According to this page
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html
it is only available if (Enabled only in a UIWebView with the allowsInlineMediaPlayback property set to YES.) I understand in Mobile Safari this is YES on iPad and NO on iPhone and iPod Touch.
I don't know about android, but Safari on the iPhone or iPod touch will play all videos full screen because of the small screen size. On the iPad it will play the video on the page but allow the user to make it full screen.
Related
Is there any way to customize VideoJS (v. 5) HTML5 player on iPhone?
We created custom elements on top of the player and also custom controls using the createEl() method. Everything looks fine on desktop, mobile (android) and tablets (android and ipad) but when it comes to iPhone the player is falling back to HTML default controls and custom elements are not displayed (see below images).
The player on Android:
The player on iOS:
There is also a portion of code in createEl() method in video.js which tells us something about breaking on iPhone.
// insert the tag as the first child of the player element
// then manually add it to the children array so that this.addChild
// will work properly for other components
//
// Breaks iPhone, fixed in HTML5 setup.
Dom.insertElFirst(tag, el);
this.children_.unshift(tag);
this.el_ = el;
return el;
Any solution for this issue?
The answer is simple: You can not (today, maybe on future) if you are playing videos using the Safari browser on iPhone.
Mobile Safari on the iPhone does not allow videos to play inline, they must always go fullscreen. The iPad will play them inline, though I do not believe they can have overlapping content.
If you want to play inline, you would need to build your own iOS application which has a UIWebView. UIWebView has a property, allowsInlineMediaPlayback, which can be set to YES. When using this on the iPhone, you can then use custom HTML for a video tag which sets the webkit-playsinline attribute.
Check here:
https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW20
iOS Note: On iOS, full-screen videos can only display the default controls.
I came across this ans to avoid fullscreen video player in iPhone.Can we use this module to create video player custom controls.
I have using jwplayer and have own custom video controls (fast forward/backward, transcript, slow/fast, volume control, fullscreen).This controls gets hidden in iPhone and native iPhone video player is shown.
Is there any way to avoid this iphone fullscreen and still bring own custom controls.
Can this module be used for jwplayer? to bring own custom video control with jwplayer.
I have not seen that particular library in use with our player, so you're more than able to try it - but I cannot guarantee any success, nor can we provide support for its use.
With that being said, iOS 10 is slated to bring inline video playback to Safari for iPhone and the good news is our player is already set up in the way it needs to take advantage of this. Obviously, iOS 10 is in beta and not final yet so things are subject to change, but this is good news for those customers looking for inline video playback in Safari on iPhone.
Here is my problem, I would like to play flash video in my iphone app.
I'm parsing XML file and I get flash video url like this : http://www.dailymotion.com/video/xg8evw_electric-pursuit-english-version_auto
How can I do?
Thanks.
It looks like your video on the page is encoded as an H.264 MP4, so you can pull it in directly - http://vid.akm.dailymotion.com/video/693/662/27266396_mp4_h264_aac_hq_2.mp4?aksessionid=-1459231571_739074&akauth=1295628091_ff040ccd7dbe1834e6127da452a4069d (that's your video path)
I found it!
Dailymotion added a new feature which generates an iframe compatible with Ipad, Iphone and Android.
Go on video page,
Click on Embed button (under video)
Check the checkbox Enable iframe player compatible iPhone, iPad, Android ... (Beta)
I've created an HTML5 video player (very simple) that works perfectly on the iPad and the browser.
However, when I open it on the iPhone, I only get a play button which, when pressed, opens the native video player on a new window, on top of all my stuff.
That means I lose access to my custom controls and time tracking (written in Javascript), since the video is now running isolated.
Is there any way to override Apple's control of HTML5 video on the iphone and get it working like on the ipad?
Cheers
I filed a bug with Apple.
After a couple of weeks they got back to me saying, very simply, that I should add "webkit-playsinline" to the video tag on the HTML, as well as adding the "allowsInlineMediaPlayback" property on the UIWebView.
So in the end, this is what it looks like:
HTML
<video id="player" width="480" height="320" webkit-playsinline>
Obj-C
webview.allowsInlineMediaPlayback = YES;
And all works just fine :)
It's virtually undocumented and the only place I could find a reference to "webkit-playsinline" was in the iAds reference, where it says: "iAds JS only".
Until iOS Safari implements inline video support, you need to write video decoder in a web supported language. There are existing implementations of video decoders, such as Broadway for H.264 (video), jsmpeg for mpeg1, and ogv.js (video and sound support).
Keep in mind that the process of decoding a video is computationally heavy. Expect a relatively slow FPS (±20).
For your reference, these guys have prepared a demo of a video that you can play on your iOS device.
In iOS 10+
Apple enabled the attribute playsinline in all browsers on iOS 10, so this works seamlessly:
<video src="file.mp4" playsinline>
In iOS 8 and iOS 9
You can work around this issue by simulating the playback by skimming the video instead of actually .play()'ing it.
You can use iphone-inline-video to take care of the playback and audio sync (if any), and it keeps the <video> working as it should.
Do you have an app created or is this for mobile safari? If you have an app and use UIWebView you should set UIWebView's allowsInlineMediaPlayback property..
In iOS 10 adding 'playsinline' attribute to the HTML5 video tag did not prevent fullscreen playback on an iPhone UIWebview until I also added the 'controls' attribute. This is how I got it working:
<video width="100%" height="240" controls playsinline>
<source src="movie.mp4" type="video/mp4" >
</video>
With, of course, _webView.allowsInlineMediaPlayback=YES; in the ViewController also.
There are some work arounds, I'm working on a library to allow this functionality automatically. However, until Apple sets safari to
webview.allowsInlineMediaPlayback = YES;
then we will have to use hacks for the same behavior.
You can check out the project here: https://github.com/newshorts/InlineVideo to see if it meets your needs.
Just add following to your config.xml:
<preference name="AllowInlineMediaPlayback" value="true" />
Otherwise UIWebView will neglect the webkit-playsinline attribute.
You can easily allow this by adding this to your config.xml:
The UIWebView should then respect the webkit-playsinline attribute.
I would like to play a video from inside the rendered page with an iPhone/Safari.
When I put a <video>, it's always opened and played in a separate full-screen Quicktime window. Is there a way to play the video directly from the page?
(a similar question Play video not in full screen mode suggests it's not possible)
Yes, it's possible to play video within the browser, but as you said, in the Quicktime fullscreen application, and the HTML5 sound API is not available (in iPhone OS 3.x).
But in the coming iPhone OS 4, it will be possible (used for iAd), so you will have to wait until this summer (or play with the beta SDK now).
No, with the current SDK compatible media will always play in full screen and there is no way to avoid that.