Disable fullscreen iphone video
In iOS 10+
Apple finally enabled the attribute playsinline
in all browsers on iOS 10, so this will work 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.
In short, use iphone-inline-video, it takes care of the playback and audio sync (if any), and it keeps the <video>
working as it should.
<div id="video-player"> <video src="http://movies.apple.com/media/us/html5/showcase/2011/demos/apple-html5-demo-tron-us_848x352.m4v"></video> <p><a href="javascript:playPause();">Play/Pause</a></p> </div> <script type="text/javascript"> // intercept and cancel requests for the context menu var myVideo = document.querySelector('video'); myVideo.addEventListener("contextmenu", function (e) { e.preventDefault(); e.stopPropagation(); }, false); // hide the controls if they're visible if (myVideo.hasAttribute("controls")) { myVideo.removeAttribute("controls") } // play/pause functionality function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } // essentially you'll have to build your own controls ui // for position, audio, etc. </script>
The idea is to:
- Prevent the user getting to the context menu (to show the controls)
- Hide any player controls that might be visible
The downside is that you have to implement your own player UI - but it's not too complicated
*This code is only intended to show you how to solve the problem, not for use in a live application
A bit more research on the subject finds:
webkit-playsinline Indicates that a video element should play in-line instead of full-screen.
Related Tags “video” Availability Available in iOS 4.0 and later. (Enabled only in a UIWebView with the allowsInlineMediaPlayback property set to YES. source
I'm afraid it just not going to be possible using the video player in Safari
They have a guide for Video on Canvas, but as you probably know it isn't supported in IOS yet: video on canvas
This document summarises the current restrictions around mobile media content in IOS: mobile video status
My understanding is that iOS always plays video full screen. On Apple's own website they used encoded image data and Javascript drawing to do video-like playback. Here is a breakdown of how they did it:
https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI