एचटीएमएल 5 वीडियो में लोडर छवि कैसे जोड़ें?

Question

पोस्टर छवि के साथ-साथ मैं वीडियो लोड होने पर लोडर छवि (एक एनिमेटेड gif) प्रदर्शित करना चाहता हूं। यह कैसे संभव है ?

Answer 1

आप वीडियो के loadstart घटना के लिए एक श्रोता देते हैं और इसका इस्तेमाल वीडियो तत्व के शीर्ष पर एक एनिमेटेड GIF ओवरले करने के लिए है, तो लोड हो रहा है ओवरले एक बार loadeddata घटना आग छिपाने सकता है। उन ईवेंट की सूची के लिए The W3C's media events draft देखें जिन्हें आप हुक कर सकते हैं।

उनके पास demo page for media events भी है।

Answer 2

यह काफी जटिल है, आपको & लोडर छवि की सही चौड़ाई को दिखाने/छिपाने के लिए विभिन्न वीडियो ईवेंट सुनना होगा। उन कार्यक्रमों में शामिल हैं (लेकिन सीमित नहीं हो सकते हैं): loadstart, progress, loadeddata, waiting, seeking, seeked। आप एक निश्चित ओपन सोर्स प्लेयर (उदा। jPlayer) का उपयोग कर सकते हैं या आगे की जांच के लिए अपना स्रोत डाउनलोड कर सकते हैं।

Answer 3

poster विशेषता में एनिमेटेड जीआईएफ का उपयोग करने का एक सस्ता तरीका हो सकता है जिसे वीडियो चालू होने पर प्रतिस्थापित किया जाएगा। उदाहरण:

<video poster="loading.gif" preload="auto" controls autoplay> 
    <source type="video/mp4" src="video.mp4"/> 
</video> 

Answer 4

यह मुझे एक बहुत ही बड़ी वास्तव में यह पता लगाने की ऐसा करने के तरीके ले लिया है, लेकिन मैं इसे साझा करने के लिए जा रहा हूँ यहाँ क्योंकि मैं अंत में एक रास्ता मिल गया! जब आप इसके बारे में सोचते हैं तो हास्यास्पद है, क्योंकि लोडिंग ऐसा कुछ है जिसे सभी वीडियो करना पड़ता है। आपको लगता है कि एचटीएमएल 5 वीडियो मानक बनाते समय वे इसे ध्यान में रखते थे।

मेरी मूल सिद्धांत यह है कि मैंने सोचा था कि काम किया है चाहिए (लेकिन नहीं होगा) था खेलने के लिए तैयार है जब यह

1. वीडियो के लिए लोड हो रहा है bg छवि जोड़ें जब js और सीएसएस
2. निकालें के माध्यम से लोड हो रहा है

   सरल, सही? समस्या यह थी कि जब स्रोत तत्व सेट किए गए थे, तो वीडियो छवि को दिखाने के लिए पृष्ठभूमि छवि नहीं मिल सका, या video.src विशेषता सेट की गई थी। प्रतिभा/भाग्य का अंतिम स्ट्रोक (प्रयोग के माध्यम से) पता लगाना था कि अगर पोस्टर कुछ सेट हो जाता है तो पृष्ठभूमि-छवि गायब नहीं होगी। मैं एक नकली पोस्टर छवि का उपयोग कर रहा हूं, लेकिन मुझे लगता है कि यह एक पारदर्शी 1x1 छवि के साथ-साथ काम करेगा (लेकिन दूसरी छवि होने की चिंता क्यों करें)। तो यह शायद यह एक प्रकार का हैक बनाता है, लेकिन यह काम करता है और मुझे अपने कोड में अतिरिक्त मार्कअप जोड़ने की ज़रूरत नहीं है, जिसका अर्थ है कि यह एचटीएमएल 5 वीडियो का उपयोग करके मेरी सभी परियोजनाओं में काम करेगा।

   एचटीएमएल

   <video controls="" poster="data:image/gif,AAAA"> 
       <source src="yourvid.mp4" 
   </video> 
   

   सीएसएस (लोड हो रहा वर्ग जे एस के साथ वीडियो पर लागू)

   video.loading { 
       background: black url(/images/loader.gif) center center no-repeat; 
   } 
   

   जे एस

   $('#video_id').on('loadstart', function (event) { 
       $(this).addClass('loading') 
       }); 
       $('#video_id').on('canplay', function (event) { 
       $(this).removeClass('loading') 
       }); 
   

   यह मेरे लिए पूरी तरह से काम करता है, लेकिन केवल पर क्रोम और सफारी में परीक्षण किया मैक। अगर किसी को भी बग और सुधार मिलते हैं तो मुझे बताएं!

Answer 5

यहाँ इस समस्या के लिए मेरे समाधान के बाद से pixelearth के जवाब फ़ायरफ़ॉक्स पर काम नहीं लगता है (शायद नकली पोस्टर के साथ एक समस्या)

HTML है

<video id="video1" height="236" preload="auto" controls> 
    <source src="yourVideo.mp4"> 
    Your browser does not support HTML5 video. 
</video> 

जे एस

$('#video1').on('loadstart', function (event) { 
    $(this).addClass('background'); 
    $(this).attr("poster", "/your/loading.gif"); 
}); 

$('#video1').on('canplay', function (event) { 
    $(this).removeClass('background'); 
    $(this).removeAttr("poster"); 
}); 

सीएसएस

video.background { 
    background: black 
} 

इस जवाब आप नकली पोस्टर या दुरुपयोग के साथ चारों ओर गंदगी की जरूरत नहीं है के साथ उद्देश्यों है कि वे के लिए नहीं बनाया गया के लिए जिम्मेदार बताते हैं। उम्मीद है की यह मदद करेगा।

पीएस पोस्टर विशेषता जोड़ने के लिए आप निश्चित रूप से कुछ और घटनाएं जोड़ सकते हैं उदा। अगर यह वीडियो के बीच में आगे नहीं खेल सकते और अधिक बफरिंग की जरूरत

आप एक jsfiddle जो here