2015-10-22 18 views
6

Ho un lettore video HTML5 di base senza controlli in questo modo ...Javascript HTML5 play() non funziona in ios9 Safari?

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

Un pulsante è posta sopra la parte superiore che, quando premuto carichi il video desiderato:

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

ho anche adesso comincio verificare se il video canplaythrough e dovrebbero iniziare a giocare utilizzando:

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

Questo ha funzionato in iOS 8, ma da allora ios9 non succede nulla. Il video è bloccato sul primo fotogramma e non suona. Anche se aggiungo un altro pulsante in alto con play() assegnato non succede nulla. Devo abilitare i controlli e giocarci usando il pulsante play fornito. Se metto in pausa il video e poi premo il mio pulsante di riproduzione, funzionerà. Voglio essere in grado di utilizzare i miei controlli progettati.

Qualcuno sa perché questo sta facendo ora?

+1

Vivere la stessa cosa. Stranamente, se usi Safari e aggiungi la stessa pagina alla schermata principale, il video verrà riprodotto. – Mac

risposta

0

Il codice seguente funziona come segue;

  • iOS 9.2.1 - video viene riprodotto a schermo intero quando il tasto viene premuto
    • Dalla schermata iniziale, il video viene riprodotto in linea
  • iOS 9.3 beta 1 - video viene riprodotto in linea quando il pulsante è premuto
    • Dalla schermata iniziale, il video viene riprodotto in linea

I file video sono da 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>