2015-10-22 15 views
6

Mam podstawowego odtwarzacza wideo HTML5 bez kontroli, jak tak ...JavaScript HTML5 play() nie działa w Safari ios9?

<video id="videoPlayer" preload="auto" webkit-playsinline> 
<source id="videoSourceMP4" src="" type="video/mp4" /> 
<source id="videoSourceOGG" src="" type="video/ogg" /> 
</video> 

przycisk na wierzchu układa, że ​​po naciśnięciu ładunki żądany film:

document.getElementById("videoSourceMP4").src = "videos/video.mp4"; 
document.getElementById("videoSourceOGG").src = "videos/video.ogg"; 
document.getElementById("videoPlayer").load(); 

ja też teraz rozpocząć sprawdzanie, czy canplaythrough wideo i powinny rozpocząć odtwarzanie przy użyciu:

document.getElementById("videoPlayer").oncanplaythrough = function(){ 
document.getElementById("videoPlayer").play(); 
} 

To działało w systemów iOS 8, jednak odkąd ios9 nic się nie dzieje. Film utknął w pierwszej klatce i nie jest odtwarzany. Nawet jeśli dodaję inny przycisk na górze z przypisaną funkcją play() nic się nie dzieje. Muszę włączyć sterowanie i odtworzyć go za pomocą przycisku odtwarzania. Jeśli wstrzymam wideo, a następnie naciśnij mój własny przycisk odtwarzania, będzie działać. Chcę móc korzystać z moich własnych zaprojektowanych kontrolek.

Czy ktoś wie, dlaczego to robi teraz?

+1

Doświadczanie samo. Co dziwne, jeśli użyjesz Safari i dodasz tę samą stronę do ekranu głównego, wideo zostanie odtworzone. – Mac

Odpowiedz

0

Poniższy kod działa w następujący sposób;

  • iOS 9.2.1 - Wideo odtwarza pełny ekran, gdy przycisk jest wciśnięty
    • Z ekranu głównego wideo odgrywa inline
  • iOS 9.3 beta 1 - wideo odgrywa inline, gdy przycisk jest wciśnięty
    • Z ekranu głównego wideo odgrywa inline

Pliki wideo są od http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5

<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <style> 
    video{ 
     width:400px; 
     border: 2px dashed black; 
    } 
    button{ 
     font-size:2em; 
     padding:1em; 
    } 
    </style> 
</head> 
<body onload='init()'> 
    <video id="videoPlayer" preload="auto" webkit-playsinline> 
     <source id="videoSourceMP4" src="" type="video/mp4" /> 
     <source id="videoSourceOGG" src="" type="video/ogg" /> 
    </video> 
    <br/> 
    <button type='button' onclick='go()'>Play</button> 
    <script> 
    function init(){ 
     document.getElementById("videoPlayer").oncanplaythrough = function(){ 
      document.getElementById("videoPlayer").play(); 
     } 
    } 
    function go(){ 
     document.getElementById("videoSourceMP4").src = "small.mp4"; 
     document.getElementById("videoSourceOGG").src = "small.ogg"; 
     document.getElementById("videoPlayer").load(); 
    } 
    </script> 
</body> 

Powiązane problemy