2015-10-22 9 views
6

मैं बहुत तरह नियंत्रण के बिना एक बुनियादी HTML5 वीडियो प्लेयर है ...जावास्क्रिप्ट एचटीएमएल 5 प्ले() आईओएस 9 सफारी में काम नहीं कर रहा है?

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

एक बटन शीर्ष पर रखी है कि जब भार वांछित वीडियो दबाया:

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

मैं भी अब अगर जाँच शुरू वीडियो canplaythrough और का उपयोग कर खेल रहा शुरू करना चाहिए:

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

यह iOS8 में काम किया, फिर भी जब से ios9 कुछ नहीं होता। वीडियो पहले फ्रेम पर फंस गया है और नहीं खेलता है। भले ही मैं play() के साथ शीर्ष पर एक और बटन जोड़ता हूं, कुछ भी नहीं होता है। मुझे नियंत्रण सक्षम करना होगा और प्रदान किए गए प्ले बटन का उपयोग करके इसे खेलना होगा। अगर मैं वीडियो को रोकता हूं और फिर अपना खुद का प्ले बटन दबाता हूं तो यह काम करेगा। मैं अपने स्वयं के डिज़ाइन किए गए नियंत्रणों का उपयोग करने में सक्षम होना चाहता हूं।

क्या किसी को पता है कि यह अब क्यों कर रहा है?

+1

एक ही बात का अनुभव कर रहे हैं। विचित्र रूप से, यदि आप सफारी का उपयोग करते हैं और होम पेज पर एक ही पृष्ठ जोड़ते हैं, तो वीडियो चलाएगा। – Mac

उत्तर

0

नीचे दिया गया कोड निम्नानुसार कार्य करता है;

  • आईओएस 9.2.1 - वीडियो इनलाइन निभाता बटन है जब - वीडियो पूर्ण स्क्रीन जब बटन
    • दबाया जाता है होम स्क्रीन से वीडियो इनलाइन निभाता
  • आईओएस 9.3 बीटा 1 निभाता है दबाया
    • होम स्क्रीन से वीडियो इनलाइन निभाता

वीडियो फ़ाइलों से 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> 

संबंधित मुद्दे