(sorry for the big images not sure how to resize in this markdown deriv)
I have some video in a webpage, using html5 video tag.
On android, the video will remain inline on the page, allowing me to have other content around it such as subtitles in the HTML.
But on the iPhone when you hit play the video jumps out full-screen, destroying any other features.
Is there any way to prevent this take-over?
On Android, or normal web, we don't have this problem.
FYI tags using are (jade)
video(width="100%" controls="controls" autoplay="true" id='videoPlayer' class='video-player')
source(src="#{videoUrl}" type="video/mp4")
Before play
After click to play
While not originally possible in Safari on iOS using the native HTML <video> tag, Apple finally added support for this a while back by adding support for specifying a playsinline attribute on video elements.
e.g. <video … playsinline />
I appreciate this question is old, but someone had down voted it and it was unanswered.
Related
Using PhoneGap, I'm trying to display videos on a page.
All video tags are showing the play icon, but when I click on it, it does not play the video. This issue shows up only on iPad, not on iPhone.
Here's the markup I'm using:
<video id="video1" width="100" height="100" controls>
<source src="video1.mp4" type="video/mp4"/>
</video>
I can also recommend Projekktor jquery plugin.
check it at: http://www.projekktor.com/
I solved this by using JavaScript to enable the videos to run fullscreen.
It now runs fine on iPad and iPhone, here's a link to a question that helped me figure it out.
I am setting up a static blog for the music that I write. My music is played using HTML5 audio and the default audio controls for every browser. This works well on a desktop but when displaying on the iPhone browser the mobile theme is overridden and the width is increased to make the page much wider than the CSS. The audio player element is also misaligned.
If I view a blog post which doesn't have an audio player then it looks correct, like this:
The website is at http://108.171.179.41/ as I haven't migrated the DNS records from my old blog yet. In the future it will be at danielcompton.net
Does anyone know why the display of my website is odd when viewing on iPhone?
I'm using a simple HTML5 video tag to reproduce an mp4 video in the iphone browser but it always open the video player on the iphone.
Is there a way to play the video inside the browser?
<video src="http://video-js.zencoder.com/oceans-clip.mp4"
autoplay="autoplay" <!-- Boolean attribute. Omit to prevent autoplay. -->
start="00:00:00.00"
loopstart="00:00:00.07" <!-- 7 seconds -->
loopend="00:00:00.19"
end="00:00:00.27"
playcount="4" <!-- play 4x -->
controls="true"
width="640"
height="480"
>
This is my code I'm using, and works well in a normal browser but in the iphone it allways opens in the video player.
Thanks!
To the best of my knowledge, iPhones always open HTML5 video in the native player (to avoid postage-stamp sized videos). iPads will play it within Safari using the same code. I don't believe there's a way to override this.
Use playsinline
<video … playsinline />
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.
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.