Google क्रोम मोबाइल पर HTML5 वीडियो नहीं चलाता

Question

मुझे क्रोम के नवीनतम संस्करण में अपने एंड्रॉइड मोबाइल पर वीडियो चलाने में समस्याएं हैं। पफिन ब्राउज़र जैसे अन्य ब्राउज़रों में वीडियो चल रहा है। परीक्षण प्रयोजनों के लिए मैं सभी आम स्वरूपों की कोशिश की:

mp4 
<br /> 
<video autoplay="autoplay" loop="loop" onended="this.play()"><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" /></video> 
<br /> 
webm 
<br /> 
<video autoplay="autoplay" loop="loop" onended="this.play()"><source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" /></video> 
<br /> 
ogg 
<br /> 
<video autoplay="autoplay" loop="loop" onended="this.play()"><source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" /></video> 

https://codepen.io/anon/pen/ozpVNP

Mozilla पहला वीडियो के अनुसार, वह यह है कि 264 + MP4 खेलना चाहिए में एएसी। मैं खाते में this article भी लेता हूं और जावास्क्रिप्ट द्वारा अतिरिक्त रूप से वीडियो चलाने की कोशिश करता हूं और सफलता के बिना पहले video टैग पर type विशेषता को निकालने का प्रयास करता हूं।

मैं इसे मोबाइल पर क्रोम में कैसे काम कर सकता हूं? एपीआई केवल एक उपयोगकर्ता हावभाव द्वारा शुरू किया जा सकता है:

Answer 1

समस्या गूगल चाहते हैं कि उपयोगकर्ता द्वारा स्वयं के द्वारा आरंभ किसी भी मीडिया, इसलिए यदि you debug your device chrome browser, आप चेतावनी "'HTMLMediaElement' पर 'चलाएँ' पर निष्पादित करने में विफल हो जाएगा है। " तो है कि आप एक क्लिक करें घटना

Answer 2

इस पर किसी भी महान जानकारी होने के लिए प्रकट नहीं होता है के साथ उदाहरण के लिए वीडियो प्रारंभ संलग्न करने के लिए, की जरूरत है, इसलिए मैं अपने निष्कर्षों पोस्ट चाहते हैं सोचा का मतलब है।

मैं html5 वीडियो प्लेबैक, क्रोम 61 और एम्बेडेड ब्राउज़र, और सफारी 9 & 11 के साथ एक Android 5.0.1 सैमसंग एस 4 पर क्रोम डेस्कटॉप और मोबाइल पर डिबगिंग किया गया है एक स्वत: जावास्क्रिप्ट खेलने का उपयोग कर/AngularJS में लिखा रोकें (नीचे)। वीडियो एक कैरोसेल में एम्बेडेड है, इसलिए कभी-कभी दिखाई देता है, कभी-कभी नहीं। संक्षेप में:

• मैं दोनों वेबएम (vp8/vorbis) और mp4 (h264/aac) प्रारूपों की अनुशंसा करता हूं। ये सबसे समर्थित प्रारूप हैं और समान बिटरेट के लिए समान गुणवत्ता है। ffmpeg दोनों एन्कोड कर सकते हैं।
• ऐसा लगता है कि क्रोम मोबाइल इसे प्राप्त कर सकता है तो वेबम पसंद करता है, इसलिए इसे पहले रखें।
• एक ब्राउज़र जब आप इसे फ़ाइल URL पर निर्देशित एक फ़ाइल खेलता है, इस यह यह खेलेंगे जब एक वीडियो टैग में एम्बेडेड है, हालांकि यह प्रारूप & कोडेक्स का समर्थन कर रहे है, तो यह होता है, तो आपको बता देंगे मतलब यह नहीं है प्ले। क्रोम मोबाइल एक वीडियो स्रोत रखने के बारे में बहुत पसंद करता है जिसका संकल्प बहुत अधिक है।
• सफारी (और शायद आईओएस) एक वीडियो चलाएगा जब तक कि बाइट-रेंज का समर्थन करने वाले सर्वर द्वारा सेवा नहीं की जाती। उदाहरण के लिए अपाचे, nginx और अमेज़ॅन एस 3 उनका समर्थन करते हैं, लेकिन कई छोटे वेब सर्वर (जैसे डब्लूएसजीआई सर्वर) नहीं करते हैं।
• वीडियो का क्रम स्रोत media विशेषता से अधिक मायने रखता है। हमेशा पहले एक वीडियो के कम संकल्प संस्करण है। नीचे दिया गया उदाहरण 1920x1080 और 1280x720 का उपयोग करता है। ऐसा लगता है कि मोबाइल ब्राउज़र एक वीडियो का सामना करता है जो "बहुत अधिक रेज" है, यह सिर्फ अन्य स्रोतों को संसाधित करना बंद कर देता है और पोस्टर पसंद करता है।
• controls विशेषता है और जावास्क्रिप्ट के माध्यम से मैन्युअल प्ले बनाम बनाम कोई फर्क नहीं पड़ता है।
• muted विशेषता एंड्रॉइड को स्टेटस बार में थोड़ा स्पीकर आइकन डालने से रोकती है लेकिन ऑफ-स्क्रीन, यहां तक ​​कि जब वीडियो में ऑडियो नहीं होता है।साइड-नोट के रूप में, यदि आप ध्वनि के साथ वीडियो को ऑटोप्ले करना चाहते हैं तो मैं वास्तव में आपके दर्शकों के बारे में भी सोचूंगा। व्यक्तिगत रूप से मुझे लगता है कि यह एक बुरा विचार है।
• preload विशेषता बहुत अंतर नहीं लगती है। ब्राउजर स्वचालित रूप से चुने गए वीडियो मेटाडेटा को फिर से लोड कर देगा।
• कोई स्रोत type विशेषता रखने से वीडियो को खेलना बंद नहीं होता है। यदि कुछ भी यह ब्राउज़र को चुनने में मदद करता है कि कौन सा स्रोत सर्वोत्तम
• के लिए चुनने के लिए चुनता है तो JS video.oncanplay ईवेंट यह देखने का सबसे अच्छा तरीका है कि वीडियो टैग सफल रहा है या नहीं। यदि आपको वह नहीं मिलता है, तो वीडियो नहीं चलाएगा, लेकिन ब्राउज़र आपको क्यों नहीं बताएगा।

HTML:

<video class="img-responsive-upscale ng-scope" 
    video-auto-ctrl loop muted preload poster="0022.png"> 
    <source src="vid_small.webm" media="(max-width: 1280px)" type="video/webm"> 
    <source src="vid_small.mp4" media="(max-width: 1280px)" type="video/mp4"> 
    <source src="vid.webm" media="(max-width: 1920px)" type="video/webm"> 
    <source src="vid.mp4" type="video/mp4"> 
    <img src="0022.png" alt="something" 
    title="Your browser does not support the <video> tag"> 
</video> 

जावास्क्रिप्ट:

<script type="text/javascript"> 
angular.module('myproducts.videoplay', []).directive('videoAutoCtrl', 
    function() { 
    return { 
    require: '^uibCarousel', 
    link: function(scope, element, attrs) { 
     var video = element[0]; 
     var canplay = false; 
     var rs = ["HAVE_NOTHING", "HAVE_METADATA", "HAVE_CURRENT_DATA", "HAVE_FUTURE_DATA", "HAVE_ENOUGH_DATA"]; 
     var ns = ["NETWORK_EMPTY", "NETWORK_IDLE", "NETWORK_LOADING", "NETWORK_NO_SOURCE"]; 

     function vinfo() { 
     console.log("currentSrc = " + video.currentSrc); 
     console.log("readyState = " + rs[video.readyState]); 
     console.log("networkState = " + ns[video.networkState]); 
     bufinfo(); 
     } 

     function bufinfo() { 
     // tr is a TimeRanges object 
     tr = video.buffered 
     if (tr.length > 0) { 
      var ranges = "" 
      for (i = 0; i < tr.length; i++) { 
      s = tr.start(i); 
      e = tr.end(i); 
      ranges += s + '-' + e; 
      if (i + 1 < tr.length) { 
       ranges += ', ' 
      } 
      } 
      console.log("buffered time ranges: " + ranges); 
     } 
     } 

     video.onerror = function() { 
     console.log(video.error); 
     } 

     video.oncanplay = function() { 
     canplay = true; 
     if (!playing) { 
      console.log("canplay!"); 
      vinfo(); 
     } 
     } 

     var playing = false; 
     function playfulfilled(v) { 
     console.log("visible so playing " + video.currentSrc.split('/').pop()); 
     playing = true; 
     } 

     function playrejected(v) { 
     console.log("play failed", v); 
     } 

     function setstate(visible) { 
     if (canplay) { 
      if (visible) { 
      p = video.play(); 
      if (p !== undefined) { 
       p.then(playfulfilled, playrejected); 
      } 
      } else if (playing) { 
      video.pause(); 
      console.log("invisible so paused"); 
      playing = false; 
      } 
     } else { 
      console.log("!canplay, visible:", visible); 
      vinfo(); 
     } 
     } 
     // Because $watch calls $parse on the 1st arg, the property doesn't need to exist on first load 
     scope.$parent.$watch('active', setstate); 
    } 
    }; 
}); 
</script>