I have a m4v video that is able to play using html5 video tag on the iPhone - but it wont play on the iPad using html5. If i go directly to the video file from the iPad it plays fine- But if I use the html5 video tag to link to it the play button wont show. Im testing using an iPad 1 and iPhone 4 - both running iOS 5. Does anyone have an idea why it wont play on the iPad?
Html5 video page - Video URL
Hey this probably won't help much for your situation but i found that with video streaming through a webview, it won't let you play video's past a certain file size.
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 am trying to play youtube videos after loading the webview. But Only Audio is being played, not video. Although I get play button in status bar, the Media Player does not become active. The Same piece of code works in iTouch 4.1 and simulator but not on iPhone 4.1/4.0. What am I missing here???
Is the default youtube application playing video? If yes, You might want to try removing the frameworks, add them again and clean build your project.
I want to know if I could play a mp3 file or mp4 (video) file through an UIWebView by loading a simple url request. I have already tried sending the UIWebView to a video link (e.g. http://google.com/blah.mp4) but it will flash a quick QuickTime logo and show a black screen. However in MobileSafari it streams fine. Is there anyway to play a media file through an UIWebView??!
Thanks,
Kevin
Use the HTML5 <audio> tag.
Linda
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.