CODEWITHSUNDEEP
iphoneioshtmlvideocanvas
Sebass van Boxel
Sebass van Boxel

Reputation: 2602

Disable fullscreen iphone video

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?

Upvotes: 63

Views: 87532

Answers (7)

fregante
fregante

Reputation: 31678

You will need the playsinline attribute:

<video src="file.mp4" playsinline></video>

If you're using JSX in a React component, the attribute is in camelCase:

<video src="file.mp4" playsInline/>

The attribute is also available as a property, also in camelCase:

video.playsInline = true;

Upvotes: 94

Sudhir chaudhary
Sudhir chaudhary

Reputation: 31

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

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

Upvotes: 3

Lincon Rezende
Lincon Rezende

Reputation: 11

I managed to make it work by using the mp4 video as the preloader "poster".

my code:

<video poster="/path/to/video.mp4" autoplay loop muted webkit-playsinline playsinline type="video/mp4">
    Your browser does not support the video tag.
</video>

I just wanted a mp4 to be displayed as a GIF... I realized that the preloader itself was working perfectly. And.. to prevent a possible future failure with other browsers, I just added a condition to check if the current browser is a iOS browser, if yes, then I use this non sense work around, otherwise, I use the normal video tag with SRC and a preload gif on the "poster" parameter.

Upvotes: 1

Rene Ortega
Rene Ortega

Reputation: 41

I encountered this issue while developing a mobile app using react native. My solution was easy/stressful. If you are using Webview, this is my solution. Also, something to mention, If you are using low power mode on an ios device, you cannot autoplay a video. There is a function of some sort to get by it but for now, this will work.

import { WebView } from "react-native-webview";
<WebView
    style={styles.container}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    allowsInlineMediaPlayback={true}
    source={{
      html: `
      <video
      id = "video"
      style="width: 100%; height: 100%; object-fit: cover;"
      poster="" width="50%" height="50%" muted=" loop="" playsinline
      autoplay>
      <source src="https://aparissi.com/wp-content/uploads/2021/10/SplashVideo-1.mp4">
      <source>
    </video>
    `,
    }}
  />

In react native webview, there a property named "allowsInLineMediaPlayback". Set it to true! You also must have playsinline inside the video tag aswell. Another thing to mention was that you cannot auto-play a video if you don't have the muted property either. Happy Coding!

Upvotes: 1

mabbasi
mabbasi

Reputation: 81

just add 'playsinline':

in javascript:

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

in html:

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

Upvotes: 4

Dithermaster
Dithermaster

Reputation: 6333

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

Upvotes: 3

web_bod
web_bod

Reputation: 5758

    <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

Upvotes: 21

Related Questions