एचटीएमएल 5 वीडियो में पोस्टर के रूप में गतिशील रूप से पहले फ्रेम का उपयोग कर?

Question

मुझे आश्चर्य है कि इस प्रभाव को प्राप्त करने के लिए कोई सीधा तरीका है, बिना फ्रेम निकालने के बैकएंड कोड की आवश्यकता के बिना, इसे किसी jpg और डेटाबेस के रूप में सहेजें।

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

Answer 1

एक Popcorn.js प्लगइन Popcorn.capture कहा जाता है जो आप अपने एचटीएमएल 5 वीडियो के किसी भी फ्रेम से पोस्टर बनाने के लिए अनुमति देगा है।

एक सीमा यह है कि द्वारा लगाया गया है नहीं है ब्राउज़र जो डोमेन पर अनुरोधित संसाधनों के पिक्सेल डेटा को पढ़ने पर रोक लगाता है (कैनवास एपीआई का उपयोग करके वर्तमान मूल्य को रिकॉर्ड करने के लिए फ्रेम)। स्रोत वीडियो को उसी डोमेन पर होस्ट किया जाना चाहिए जैसे स्क्रिप्ट और एचटीएमएल पेज जो काम करने के लिए इस दृष्टिकोण के लिए अनुरोध कर रहा है।

इस प्लगइन का उपयोग कर पोस्टर बनाने के लिए कोड काफी सरल है:

// This block of code must be run _after_ the DOM is ready 
// This will capture the frame at the 10th second and create a poster 
var video = Popcorn("#video-id"); 

// Once the video has loaded into memory, we can capture the poster 
video.listen("canplayall", function() { 

    this.currentTime(10).capture(); 

}); 

Answer 2

आप स्वचालित रूप से वीडियो के पहले फ्रेम लोड करने के लिए वीडियो तत्व पर preload='auto' सेट कर सकते हैं।

Answer 3

मैंने हाल ही में हाल ही में एक परियोजना के लिए ऐसा किया जो डेस्कटॉप और मोबाइल पर काम करता है। यह चाल आईफोन पर काम करने के लिए मिल रही थी।

preload=metadata डेस्कटॉप और एंड्रॉइड डिवाइस पर काम करता है लेकिन आईफोन नहीं।

iPhones के लिए मुझे इसे autoplay पर सेट करना पड़ा ताकि पोस्टर छवि स्वचालित रूप से प्रारंभिक लोड पर दिखाई दे। iPhones वीडियो को ऑटो बजाने से रोक देगा, लेकिन पोस्टर छवि परिणाम के रूप में दिखाई देती है।

मुझे यहां पावन के उत्तर का उपयोग करके आईफोन के लिए एक चेक करना पड़ा। Detect iPhone Browser। फिर डिवाइस के आधार पर autoplay के साथ या उसके बिना उचित वीडियो टैग का उपयोग करें।

var agent = navigator.userAgent; 
var isIphone = ((agent.indexOf('iPhone') != -1) || (agent.indexOf('iPod') != -1)) ; 

$videoTag = ""; 
if(isIphone()) { 
    $videoTag = '<video controls autoplay preload="metadata">'; 
} else { 
    $videoTag = '<video controls preload="metadata">'; 
}