लोड करते समय किसी विशेष स्थिति में HTML5 वीडियो प्रारंभ करें?


90

मुझे कुछ बिंदु पर शुरू करने के लिए HTML5 वीडियो की आवश्यकता है। मान लीजिए कि 50 सेकंड के समय के बाद।

मैंने कोशिश की लेकिन इसकी उम्मीद के मुताबिक काम नहीं हुआ। क्या कुछ है जो मैं गलत कर रहा हूँ?

यहाँ कोड है:

   <video id="vid1" width="640" height="360">
       <source src="file.webm" type="video/webm" /> 
       Your browser does not support the video tag.
   </video>
   <script>
       document.getElementById('vid1').currentTime = 50;
   </script> 

जब पृष्ठ लोड होता है, तो यह शुरुआत से ही खेलना शुरू कर देता है। हालाँकि अगर मैं प्लेबैक के दौरान इसे कॉल करता हूँ जैसे कुछ समय बाद, यह ठीक काम करता है। क्या मुझसे कुछ छूट रहा है?


2
क्या ब्राउज़र? क्या आपने कॉल को कुछ मील के सेकंड में देरी करने की कोशिश की है? शायद पूरी तरह से वीडियो तत्व को लोड करने में थोड़ा अधिक समय लग रहा है
ऑर्टिगा

जवाबों:


129

जब तक आप किसी विशेष समय की तलाश कर सकते हैं इससे पहले कि ब्राउज़र वीडियो की अवधि जानता है तब तक आपको इंतजार करना होगा। इसलिए, मुझे लगता है कि आप 'लोडमेटडाटा' इवेंट के लिए कुछ इस तरह इंतजार करना चाहते हैं:

document.getElementById('vid1').addEventListener('loadedmetadata', function() {
  this.currentTime = 50;
}, false);

2
यह सफारी में काम नहीं करता है। मैंने लोडडाटा इवेंट को भी आजमाया। कोई विचार?
शमौन Perepelitsa

कोई बात नहीं। यह WEBM प्रारूप के साथ एक मुद्दा है। MP4 ठीक काम करता है।
शमौन Perepelitsa

वीडियो चलाने के लिए बदलाव करने से पहले 'पीरियडचेंज' इवेंट का उपयोग करें और हमेशा पॉज़ को कॉल करें
जेसन व्हाइट

53

आप सीधे मीडिया फ्रेगमेंट्स यूआरआई के साथ लिंक कर सकते हैं , बस फ़ाइल का नाम बदलकर file.webm # t = 50 कर सकते हैं

यहाँ एक उदाहरण है

यह बहुत अच्छा है, आप सभी प्रकार की चीजें कर सकते हैं। लेकिन मुझे ब्राउज़र समर्थन की वर्तमान स्थिति का पता नहीं है।


ब्राउज़र का समर्थन अच्छा है। मुझे लगता है कि सभी HTML5 सहायक ब्राउज़र कम से कम बुनियादी अस्थायी मीडिया अंशों का समर्थन करते हैं।
जिम एस।

@michaelhanon, IE को प्राप्त करने के लिए पॉलीफ़िल लिखना आसान होगा। ब्राउज़र का पता लगाएं, यदि समर्थित नहीं है, तो URL को तोड़ें, क्वेरी पैरामीटर ढूंढें, वीडियो के समय को बदलने के लिए जावास्क्रिप्ट का उपयोग करें ... अगर मुझे मौका मिले तो मैं ऐसा कर सकता हूं
gdgr

वहाँ अंत समय सेट करने के लिए एक टुकड़ा है?
DGoiko

यह एक बिंदु के बाद एक सेकंड के अंशों को भी अनुमति देता है: #t=17.79^ _ ^
क्लेसुन

50

JAVASCRIPT का उपयोग किए बिना

बस #t=[(start_time), (end_time)]अपने मीडिया URL के अंत में जोड़ें । एकमात्र झटका (यदि आप इसे इस तरह से देखना चाहते हैं) तो आपको यह जानना होगा कि अंत समय का संकेत देने के लिए आपका वीडियो कितने समय का है। उदाहरण:

<video>
    <source src="splash.mp4#t=10,20" type="video/mp4">
</video>

नोट्स: IE में समर्थित नहीं है


दूसरा अंक समाप्त नहीं होता है कि वीडियो को शुरू करने के लिए कितना लोड किया गया था ... पहले अंक ने काम किया। कोई विचार?
Martian2049

यह वास्तव में अच्छी तरह से काम नहीं करता है। ब्राउज़र अभी भी उतना ही प्रीलोड करता है जितना वह चाहता है, हो सकता है कि जहां आप निर्णय लें, वहीं से शुरू करें और समाप्त करें, लेकिन प्रीलोड बंद नहीं हुआ ...
Martian2049

28

एचटीएमएल 5 में वीडियो टैग का उपयोग करते समय वीडियो प्रारंभ और समाप्ति समय समायोजित करें;

http://www.yoursite.com/yourfolder/yourfile.mp4#t=5,15

जहां अल्पविराम का समय सेकंड में शुरू होता है, वहीं अल्पविराम का अधिकार सेकंड में समय होता है। केवल प्रारंभ समय को प्रभावित करने के लिए अल्पविराम और समाप्ति समय छोड़ें।


दूसरा अंक समाप्त नहीं होता है कि वीडियो को शुरू करने के लिए कितना लोड किया गया था ... पहले अंक ने काम किया। कोई विचार?
मार्टियन 2049

ब्राउज़रों के साथ काम करते समय, W3C कल्पना और caniuse.com की जांच करना हमेशा बेहतर होता है ताकि यह देखा जा सके कि एक फीचर कितना व्यापक रूप से समर्थित है। (सबसे अच्छा StackOverflow जवाब चश्मे के लिए लिंक।) इस मामले में, वे 'मीडिया Fragments' कहा जाता है, और कल्पना यहाँ है। w3.org/TR/media-frags
माइकल शीपर

3

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


मुझे लगता है कि लोडमेटडाटा को सही घटना माना जाता है, लेकिन मुझे भी तलाशने योग्य था। 0 (केवल OSX पर सफारी में) जब तक मैंने डटलोएड के बारे में नहीं सुना। धन्यवाद
Statuswoe

1
इसे क्यों ठुकरा दिया गया? यह संभवतः ओपी द्वारा प्रदान किए गए उदाहरण से सीधे संबंधित नहीं है, लेकिन यह प्रश्न के सामान्य विषय के लिए तथ्यात्मक रूप से सटीक और प्रासंगिक है।
Jayeaea

3

एक #t=10,20टुकड़े का उपयोग करके मेरे लिए काम किया।


1
यह केवल दो अन्य उच्च-मतदान उत्तरों का दोहराव है जो कुछ 5 साल पहले लिखे गए थे।
माइकल स्कीपर
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.