एचटीएमएल 5 वीडियो

Question

में नियंत्रण की स्थिति और प्ले की अवधि नियंत्रित करें हमारे पास एक वीडियो (13 मिनट लंबा) है जिसे हम HTML5 का उपयोग करके नियंत्रित करना चाहते हैं। हम अपने उपयोगकर्ताओं को उस वीडियो के उन हिस्सों को नियंत्रित करने और चुनने में सक्षम होना चाहते हैं, जिन्हें वे खेलना चाहते हैं। अधिमानतः यह नियंत्रण 2 इनपुट फ़ील्ड के माध्यम से होगा। वे पहले बॉक्स में प्रारंभ समय (सेकंड में) इनपुट करते हैं और दूसरे बॉक्स में खेलने के लिए इनपुट अवधि (सेकेंड में) इनपुट करते हैं। उदाहरण के लिए, वे वीडियो को 10 सेकंड में शुरू करना और 15 सेकंड के लिए खेलना चाहेंगे। जावास्क्रिप्ट पर कोई सुझाव या मार्गदर्शन करने के लिए यह आवश्यक है?

नोट: मैं निम्नलिखित पाया है:

• Start HTML5 video at a particular position when loading?

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

Answer 1

आप टाइमअपडेट ईवेंट श्रोता का उपयोग कर सकते हैं।

loadedmetadata ईवेंट के बाद प्रारंभ समय और अवधि का समय परिवर्तनीय सहेजें।

// Set video element to variable 
var video = document.getElementById('player1'); 

var videoStartTime = 0; 
var durationTime = 0; 

video.addEventListener('loadedmetadata', function() { 
    videoStartTime = 2; 
    durationTime = 4; 
    this.currentTime = videoStartTime; 
}, false); 

यदि वर्तमान समय प्रारंभ समय और अवधि से अधिक है, तो वीडियो को रोक देता है।

video.addEventListener('timeupdate', function() { 
    if(this.currentTime > videoStartTime + durationTime){ 
    this.pause(); 
    } 
}); 

Answer 2

पॉल शाम द्वारा प्रस्तावित जावास्क्रिप्ट समाधान का उपयोग करने के लिए बहुत सारी बारीकियां हैं। Media Fragment URI Spec का उपयोग करना बहुत आसान तरीका है। यह आपको खेलने के लिए एक बड़े ऑडियो या वीडियो फ़ाइल का एक छोटा सेगमेंट निर्दिष्ट करने की अनुमति देगा। इसका उपयोग करने के लिए आप जिस फ़ाइल को स्ट्रीम कर रहे हैं उसके लिए बस स्रोत को बदलें और #t=start,end जोड़ें जहां start सेकेंड में प्रारंभ समय है और end सेकेंड में अंत समय है।

उदाहरण के लिए:

var start = document.getElementById('startInput').value; 
var end = document.getElementById('endInput').value; 

document.getElementById('videoPlayer').src = 'http://www.example.com/example.ogv#t='+start+','+end; 

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

Answer 3

यदि आप वीडियो यूआरएल सेट करते समय वीडियो के प्रारंभ समय और समाप्ति समय सेट करने में सक्षम हैं। आप इसे 50 वीं दूसरे को 20 वीं दूसरे से खेलेंगे तरह

src="future technology_n.mp4#t=20,50" 

यूआरएल अपने आप में प्रारंभ और समाप्ति समय निर्दिष्ट कर सकते हैं।

Answer 4

माइकल हैनॉन तक विस्तारित टिप्पणियां: आईई buffered.length = 0 और seekable.length = 0. देता है वीडियो नहीं चलाता है। तो समाधान:

src = "video.mp4 # टी = 10,30"

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