Wyłącz fullscreen iPhone Video

Question

Walcząc z tym problemem przez kilka dni z rzędu teraz ...

Czy istnieje jakiś sposób, lub „Hack”, aby wyłączyć odtwarzanie wideo w trybie pełnoekranowym na Safari na iPhone. Oczywiście próbowałem już atrybutu "webkit-playsinline", ale działa to tylko w twojej własnej aplikacji.

Patrz:

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

również próbowałem umieścić film na płótnie, ale jak to wygląda wideo jako źródło dla drawImage płótnie() metoda nie jest aktualnie obsługiwana na iOS.

Czy mogę zastosować inną metodę lub technikę alternatywną? Czy naprawdę zmarnowałem swój czas w ciągu ostatnich kilku dni?

Answer 1

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

Chodzi o to, aby:

1. uniemożliwić użytkownikowi dotarcie do menu kontekstowego (aby wyświetlić elementy sterujące)
2. ukryć kontroli gracza, który może być widoczny

wadą jest to, że musisz zaimplementować swój własny odtwarzacz UI - ale nie jest to zbyt skomplikowane

* Th jest kod przeznaczony jest tylko, aby pokazać, jak rozwiązać ten problem, nie do zastosowania w żywej aplikacji

Nieco więcej badań na ten temat znajdzie:

WebKit-playsinline Wskazuje, że element wideo powinien grać w trybie zamiast pełnoekranowego.

Powiązane tagi "wideo" Dostępność Dostępne w iOS 4.0 i nowszych wersjach. (Włączone tylko w UIWebView z właściwością allowsInlineMediaPlayback ustawiony na TAK. source

Obawiam się, że po prostu nie będzie możliwe przy użyciu odtwarzacza wideo w Safari

Mają Przewodnik po wideo na płótnie, ale jak zapewne wiesz, nie jest jeszcze obsługiwany w systemie IOS: video on canvas

Ten dokument zawiera podsumowanie bieżących ograniczeń dotyczących zawartości multimedialnej urządzeń mobilnych w systemie IOS: mobile video status

Answer 2

Rozumiem, że iOS zawsze odtwarza wideo na pełnym ekranie. Na własnej stronie Apple użyli zakodowanych danych obrazu i rysunku Javascript, aby odtwarzać wideo.Oto podział na to, jak oni to zrobili:

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

Answer 3

W iOS 10+

Jabłko wreszcie włączony atrybut playsinline we wszystkich przeglądarkach na iOS 10, więc to będzie działać płynnie:

<video src="file.mp4" playsinline> 

w iOS 8 i iOS 9

można obejść ten problem poprzez symulowanie odtwarzanie sk imming wideo zamiast faktycznie .play() "go.

Krótko mówiąc, użyj iphone-inline-video, dba o odtwarzanie i synchronizację dźwięku (jeśli jest), a także utrzymuje pracę <video> tak, jak powinna.