web-dev-qa-db-fra.com

Désactiver la vidéo iPhone en plein écran

Aux prises avec ce problème pendant quelques jours d'affilée maintenant ...

Existe-t-il un moyen ou un "piratage" pour désactiver la lecture de la vidéo en plein écran sur Safari sur un iPhone. Bien sûr, j'ai déjà essayé l'attribut "webkit-playsinline", mais cela ne fonctionnera que dans votre propre application.

Voir:

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

J'ai également essayé de mettre la vidéo sur le canevas, mais comme elle ressemble à la vidéo comme source pour la méthode drawImage () du canevas n'est pas actuellement prise en charge sur iOS.

Existe-t-il une autre méthode ou technique alternative que je peux utiliser? Ou ai-je vraiment perdu mon temps ces derniers jours?

iphoneioshtml5videocanvas
26
Sebass van Boxel

Dans iOS 10+

Apple a enfin activé l'attribut playsinline dans tous les navigateurs sur iOS 10, donc cela fonctionnera de manière transparente:

<video src="file.mp4" playsinline>

Dans iOS 8 et iOS 9

Vous pouvez contourner ce problème en simulant la lecture en en écrémant la vidéo au lieu de .play() '.

En bref, utilisez iphone-inline-video , il s'occupe de la lecture et de la synchronisation audio (le cas échéant), et il maintient le <video> Fonctionne comme il se doit.

25
fregante
    <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>

L'idée est de:

  1. Empêcher l'utilisateur d'accéder au menu contextuel (pour afficher les commandes)
  2. Masquez les commandes des joueurs qui pourraient être visibles

L'inconvénient est que vous devez implémenter votre propre interface utilisateur de lecteur - mais ce n'est pas trop compliqué

* Ce code est uniquement destiné à vous montrer comment résoudre le problème, pas à utiliser dans une application en direct

Un peu plus de recherche sur le sujet révèle:

webkit-playsinline Indique qu'un élément vidéo doit être lu en ligne plutôt qu'en plein écran.

Tags associés "vidéo" Disponibilité Disponible dans iOS 4.0 et versions ultérieures. (Activé uniquement dans une UIWebView avec la propriété allowInlineMediaPlayback définie sur YES. source

Je crains que cela ne soit tout simplement pas possible en utilisant le lecteur vidéo dans Safari

Ils ont un guide pour la vidéo sur toile, mais comme vous le savez probablement, il n'est pas pris en charge dans IOS encore: vidéo sur toile

Ce document résume les restrictions actuelles concernant le contenu multimédia mobile dans IOS: état de la vidéo mobile

16
web_bod

D'après ce que je comprends, iOS lit toujours la vidéo en plein écran. Sur le site Web d'Apple, ils ont utilisé des données d'image codées et un dessin Javascript pour effectuer une lecture de type vidéo. Voici une ventilation de la façon dont ils l'ont fait:

https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI

2
Dithermaster