क्रोम के साथ HTML5 वीडियो में खोज

Question

मुझे क्रोम का उपयोग कर वीडियो में ढूंढने में समस्याएं आ रही हैं।

किसी कारण से, कोई फर्क नहीं पड़ता कि मुझे क्या करना, video.seekable.end(0) हमेशा 0.

जब मैं video.currentTime = 5 फोन है console.log(video.currentTime) के बाद, मैं यह हमेशा 0 है, जो वीडियो पुनर्स्थापित करने के लिए लगता है देखते हैं।

मैंने एमपी 4 और वीपी 9-आधारित वेबएम प्रारूप दोनों की कोशिश की है, लेकिन दोनों ने एक ही परिणाम दिए हैं।

और अधिक परेशान करने वाला यह है कि फ़ायरफ़ॉक्स पूरी तरह से सब कुछ चलाता है। क्या क्रोम के बारे में कुछ खास है जिसके बारे में मुझे पता होना चाहिए?

यहाँ मेरी कोड (जो केवल फ़ायरफ़ॉक्स में काम करता है) है:

 <div class="myvideo"> 
     <video width="500" height="300" id="video1" preload="auto"> 
      <source src="data/video1.webm" type="video/webm"/> 
      Your browser does not support videos. 
     </video> 
     </div> 

और यहाँ जावास्क्रिप्ट है:

var videoDiv = $(".myvideo").children().get(0) 
videoDiv.load(); 
    videoDiv.addEventListener("loadeddata", function(){ 
    console.log("loaded"); 
    console.log(videoDiv.seekable.end(0)); //Why is this always 0 in Chrome, but not Firefox? 
    videoDiv.currentTime = 5; 
    console.log(videoDiv.currentTime); //Why is this also always 0 in Chrome, but not Firefox? 
    }); 

ध्यान दें कि बस बुला videoDiv.play() वास्तव में सही ढंग दोनों ब्राउज़र में वीडियो खेलने है।

इसके अलावा, मूवी फ़ाइल पूरी तरह से लोड होने के बाद, videoDiv.buffered.end(0) दोनों ब्राउज़रों में सही मान भी देता है।

Answer 1

यह मुझे कुछ समय लिया यह पता लगाने की ...

समस्या निकला सर्वर साइड किया जाना है। मैं अपनी सभी वीडियो-फाइलों की सेवा के लिए जेटी के एक संस्करण का उपयोग कर रहा था। जेटी की सरल विन्यास byte serving का समर्थन नहीं करती थी।

फ़ायरफ़ॉक्स और क्रोम के बीच का अंतर यह है कि फ़ायरफ़ॉक्स पूरी वीडियो फ़ाइल डाउनलोड करेगा ताकि आप इसे देख सकें, भले ही सर्वर http code 206 (partial content) का समर्थन न करे। दूसरी ओर क्रोम पूरी फ़ाइल को डाउनलोड करने से इंकार कर देता है (जब तक कि यह वास्तव में छोटा नहीं है, लगभग 2-3 एमबी की तरह)।

तो HTML5 वीडियो के currentTime पैरामीटर प्राप्त करने के लिए क्रोम में काम करने के लिए, आप एक सर्वर http कोड 206

का समर्थन करता है कि किसी को भी लिए और ने इस समस्या हो रही जरूरत है, तो आप दोगुना कर्ल के साथ अपने सर्वर config जाँच कर सकते हैं:

curl -H Range:bytes=16- -I http://localhost:8080/GOPR0001.mp4 

यह कोड 206 लौटना चाहिए। यदि यह कोड 200 लौटाता है, तो क्रोम वीडियो की तलाश नहीं कर पाएगा, लेकिन ब्राउज़र में वर्कअराउंड के कारण फ़ायरफ़ॉक्स होगा।

और एक अंतिम टिप: आप उपयोग कर सकते हैं NPM http सर्वर आंशिक सामग्री का समर्थन करता है कि एक स्थानीय फ़ोल्डर के लिए एक सरल http सर्वर पाने के लिए:

npm install http-server -g 

और इसे चलाने के लिए एक स्थानीय फ़ोल्डर सेवा करने के लिए:

http-server -p 8000 

Answer 2

आपके पास वीडियो टैग के लिए 3 संभावनाएं हैं: एमपी 4, ओजीजी, वेबएम।

सभी प्रारूप सभी ब्राउज़रों में काम नहीं करते हैं।

यहां, मैं सोच रहा हूं कि वेबएम फ़ायरफ़ॉक्स में काम करता है लेकिन क्रोम नहीं, इसलिए आपको MP4 फ़ाइल का संदर्भ देने वाले दूसरे स्रोत टैग सहित एमपी 4 और वेबएम फ़ाइलों के लिए दोनों वैकल्पिक प्रारूपों की आपूर्ति करनी चाहिए।

उदा। src = "data/video1.mp4" type = "video/mp4"

प्रासंगिक संस्करण स्वचालित रूप से ब्राउज़र द्वारा चुना जाएगा।

Answer 3

मुझे एक ही समस्या थी। मैं एक वीडियो पर एक अंतिम घटना के लिए सुन रहा था और वीडियो के बीच में वर्तमान समय को लगातार लूप करने के लिए सेटिंग कर रहा था। यह सफारी या क्रोम में काम नहीं कर रहा था।

मुझे लगता है कि सफारी/क्रोम में एक बग हो सकती है जहां प्लेहेड स्थिति गुण तब तक उपलब्ध नहीं हैं जब तक कि मीडिया वर्तमान में नहीं चल रहा हो।

मेरा कामकाज वीडियो अंत से पहले और वास्तव में इसे समाप्त करने की अनुमति देने से पहले मेरे लूप को शुरू करना था।

पहले प्लेबैक शुरू करके अपना परीक्षण करने का प्रयास करें और फिर यह देखने के लिए अपनी नीलामी चलाएं कि यह सफारी क्रोम में काम करता है या नहीं।

Answer 4

यदि आप loadeddata के बजाय canplaythrough की प्रतीक्षा करते हैं, तो यह काम करता है।

this codepen example देखें।