HTML5 वीडियो लोड करते समय लोडिंग छवि कैसे बनाएं?

Question

वीडियो प्लेयर के रूप में mp4 वीडियो लोड करने में समय लगता है। क्या वीडियो लोड करते समय "लोडिंग" लोगो चलाने के लिए HTML5 समर्थन कर सकता है?

क्योंकि मेरे asp.net क्षुधा एक मोबाइल पेज है, यह उपयोगकर्ता क्लिक वीडियो पर वीडियो चलाने की जरूरत है (Android, iPhone ऑटोप्ले का समर्थन नहीं)। ताकि मैं पोस्टर के रूप में "लोडिंग" लोगो नहीं बना सकूं, अन्यथा, उपयोगकर्ता इसके बारे में भ्रमित होगा। जब मैं आईपैड पर प्ले बटन पर क्लिक करता हूं तो मैं एक लोडिंग लोगो प्रदर्शित करना चाहता हूं।

धन्यवाद

जो

Answer 1

टैग आईडी पोस्टर

<video controls="controls" poster="/IMG_LOCATION/IMAGENAME"> 

अधिक जानकारी पाया जा सकता है का उपयोग करें http://www.w3schools.com/html5/att_video_poster.asp

Answer 2

आप जावास्क्रिप्ट के साथ यह शायद कर सकता है एक साथ छवि ओवरले बनाने से एनिमेटेड "लोडिंग" gif जिसे आप केवल तभी प्रदर्शित करते हैं जब वीडियो लोड हो रहा है और खेलने के लिए तैयार नहीं है।

आपको मीडिया एपीआई के साथ लिंक करने के लिए जावास्क्रिप्ट लिखना होगा, यह पता लगाने के लिए कि वीडियो कब खेलने के लिए तैयार है और आगे है (इसलिए आप छवि को फिर से छुपा सकते हैं), लेकिन यह संभव होना चाहिए।

Answer 3

यह वास्तव में यह समझने के लिए एक लंबा रास्ता तय करता है कि यह कैसे करें, लेकिन मैं इसे यहां साझा करने जा रहा हूं क्योंकि मुझे आखिरकार एक रास्ता मिला! जब आप इसके बारे में सोचते हैं तो हास्यास्पद है, क्योंकि लोडिंग ऐसा कुछ है जिसे सभी वीडियो करना पड़ता है। आपको लगता है कि एचटीएमएल 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'); 
       $(this).attr('poster', ''); 
       }); 
   

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

Answer 4

इसके अलावा एक सरल उपाय एक preloader छवि जोड़ने के लिए है, जबकि वीडियो लोड हो रहा है: HTML:

<video class="bg_vid" autoplay loop poster="images/FFFFFF-0.png"> 

पोस्टर एक पारदर्शी छवि 1px है।

सीएसएस:

var finished_rendering = function() { 
    var el = document.querySelector('div#loading_msg'); 
    el.style.display="none"; 
} 

FB.Event.subscribe('xfbml.render', finished_rendering); 

मिला::

video { 
    background-image: url(images/preload_30x30.gif); 
    background-repeat: no-repeat; 
    background-size: 30px 30px; 
    background-position: center; 
    } 

Answer 5

मेरे समाधान window.fbAsyncInit = समारोह के अंदर निम्नलिखित() जोड़ने के लिए था https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.12