Disable fullscreen iphone video

Question

Struggling with this problem for a few days in a row now...

Is there any way or 'hack' to disable playing video fullscreen on Safari on a iPhone. Of course I already tried the 'webkit-playsinline' attribute, but this will only work in your own app.

See:

<video class="" poster="" webkit-playsinline>
    <source src="" type="video/ogg" preload="auto">
    <source src="" type="video/mp4" preload="auto">                
</video>

Also I've tried to put the video on canvas, but as it looks video as a source for the canvas drawImage() method is not currently supported on iOS.

Is there any other way or alternative technique I can use? Or did I really waste my time the last few days?

Solution 1

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.

Solution 2

    <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:

1. Prevent the user getting to the context menu (to show the controls)
2. 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

Solution 3

just add 'playsinline':

in javascript:

yourclassName.setAttribute('playsinline', '');

in html:

<video class="Vidoo" src="https://.../video.mp4" playsinline></video>

Solution 4

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

View more solutions

Comments

[web_bod]

Have you seen stackoverflow.com/questions/3699552/…

[Sebass van Boxel]

Also this resulted in a fullscreen playback. Though I definitely see the idea behind it.

[web_bod]

I noticed on my Windows Phone that video always plays fullscreen - I have no choice in the matter, it may not be possible through a browser - why do you need this behaviour? (there might be a different approach)

[Sebass van Boxel]

Certain elements within the website have to be triggered on specific timecodes.

[Dithermaster]

This may have changed since 2013. I've seen more "in-place" video playback, so maybe iOS 8 supported it now.

[martpie]

For me, <video src="file.mp4" playsinline> made it inline, but webkit-playsinline attribute alone didn't work.

[fregante]

@KeitIG thanks for the comment! I updated my answer. They unprefixed the property before pulling iOS 10 out of beta.

[Kay]

Is this still the case?

[fregante]

Yes, all mobile OSs after iOS 10 support the playsinline attribute.

[Raphaël Balet]

@Carlene I think you wanted to write playsinline and not playinline nor playinine, is it correct ?

[Carlene]

Oh dear! Good catch @RaphaëlBalet yes it's playsinline

[Raphaël Balet]

@Carlene could you correct it then please :) it may help others. Even if I tested it on IOS 14 and it doesn't seems to work anymore ;(

[Serguzest]

Don't be a muppet like me and forget that if using react, you have to use playsInline instead of playsinline. Trap for young players...