Hi,
I have this video embedded onto my index
<video style="width:100%;" muted="" autoplay="">
<source src="video.webm" type="video/webm">
<source src="video.mov" type="video/mp4" codecs="hvc1">
</video>
it starts playing automatically on desktops and android phones, even ipads but not iphone for some reason. Why is that? Is the iphone browser blocking it or something?
Thank you.
(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.
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 cannot get an audio tag to detect a click when it is running in iOS 7 (haven't tried earlier versions of the OS).
It works fine in a browser. Here is my code:
<audio id="myAudioPlayer" controls>
<source src="audio/myTrack.ogg" type="audio/ogg">
<source src="audio/myTrack.mp3" type="audio/mpeg">
<source src="audio/myTrack.acc" type="audio/acc">
Your browser does not support the audio tag. </audio>
Jquery:
$("#myAudioPlayer").mouseup(function(){
// DO STUFF
});
iOS 7 uses it's own styling for the HTML5 player so I am wondering if this is the issue? I can use the player controls as normal, but my custom functions do not work.
I couldn't find a fix for this so I ended up building a custom player with SoundManager2.
http://www.schillmania.com/projects/soundmanager2/
This allowed more control over my play/pause buttons and worked on iOS devices.
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.