2015-10-22 13 views
6

Ich habe einen grundlegenden Video-Player HTML5 ohne Kontrollen wie so ...Javascript HTML5 play() funktioniert nicht 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> 

Ein Knopf über oben gelegt wird, dass, wenn Lasten die gewünschte Video gedrückt:

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

ich jetzt auch die Überprüfung beginnen, wenn das Video canplaythrough und soll mit dem spielen beginnen können:

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

die in ios8 gearbeitet, aber seitdem ios9 nichts passiert. Das Video bleibt auf dem ersten Bild hängen und wird nicht abgespielt. Auch wenn ich oben einen weiteren Button mit play() zugewiesen habe passiert nichts. Ich muss die Steuerelemente aktivieren und mit der Wiedergabetaste abspielen. Wenn ich das Video pausiere und dann meine eigene Wiedergabetaste drücke, funktioniert es. Ich möchte meine eigenen Steuerelemente verwenden können.

Weiß jemand, warum das jetzt tut?

+1

das Gleiche erleben. Seltsamerweise wird das Video wiedergegeben, wenn Sie Safari verwenden und dieselbe Seite zum Startbildschirm hinzufügen. – Mac

Antwort

0

Der folgende Code funktioniert wie folgt;

  • iOS 9.2.1 - Video spielt Vollbild, wenn die Taste gedrückt wird
    • auf dem Startbildschirm das Video spielt Inline
  • iOS 9.3 Beta 1 - Video Inline spielt, wenn der Knopf gedrückt
    • auf dem Startbildschirm das Video spielt Inline

Die Videodateien sind von 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> 

Verwandte Themen