प्लगइन के बिना किसी वेबपृष्ठ में दो वीडियो सिंक्रनाइज़ करने का कोई तरीका है?

Question

क्या किसी पृष्ठ पर दो HTML5 वीडियो टैग का उपयोग करने और वीडियो को सिंक्रनाइज़ करने का कोई तरीका है? मतलब है कि अगर पहला वीडियो 15.2 सेकेंड पर है तो दूसरा वीडियो 15.2 सेकंड पर है?

मैंने देखा है और एसएमआईएल पाया है, लेकिन ऐसा लगता है कि केवल आईई में काम करता है। मैंने jQuery और jMediaElement के साथ अपने स्वयं के कुछ को लागू करने की भी कोशिश की लेकिन ऐसा लगता है कि वीडियो सिंक से बाहर हो सकते हैं।

क्या यह पहले किया गया है?

Answer 1

इसे मिला। यह http://html5demos.com पर था।

यह demo चेकआउट करें .. मेरे लिए क्रोम पर पूरी तरह से (अच्छी तरह से) काम करता है।

स्रोत पृष्ठ पर उपलब्ध है।

Answer 2

प्लगइन के बिना वीडियो चलाने का एकमात्र तरीका एचटीएमएल 5 या एसवीजी < वीडियो> के साथ है। दो एचटीएमएल 5 वीडियो सिंक्रनाइज़ करने की कोई विश्वसनीय विधि नहीं है, लेकिन यदि सटीक सिंक महत्वपूर्ण नहीं है तो आप शायद एक ही समय में प्ले() को कॉल करके या अन्यथा दो वीडियो पर play() और पॉज़() को कॉल करके बहुत करीब आ सकते हैं। सिमॉन द्वारा संकेत के रूप में उन्हें अनुमानित सिंक में लाने के लिए।

एसवीजी < वीडियो के लिए, एसवीजी में पहले से ही SMIL का कुछ छोटा (और संशोधित) सबसेट है, इसलिए यह पहले से ही spec में समर्थित हो सकता है, लेकिन मेरे ज्ञान के लिए कोई ब्राउज़र इसे ठीक से संभाल नहीं पाएगा।

Answer 3

ऐसा लगता है कि यहां तक ​​कि ओपेरा इस मुद्दे (10 MAR, 2010) है:

वर्तमान में एक वीडियो की समयावधि से बातें सिंक्रनाइज़ किया जा रहा है, उदाहरण के कैप्शन या Infoboxes के लिए के लिए अच्छा नहीं एपीआई नहीं है। इस उद्देश्य के लिए कल्पना में "क्यू रेंज" थी (जो पहले भी "क्यू अंक" थे); ऐसी उम्मीद है कि कुछ इसी तरह भविष्य

http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

Btw में जोड़ दिया जाएगा, लेख वाकई दिलचस्प है, और हो सकता है कि आप इसे में कुछ उपयोगी टिप्स मिल जाएगा।

Answer 4

html5demos पर प्रस्तुत किया गया डेमो काम करता है लेकिन यह आसानी से सिंक से बाहर जा सकता है।

यहां एक ऐसा समाधान प्रदान करने वाला एक लेख है जो अनुरोध का उपयोग करता हैएनीमेशन फ्रेम (इसके बारे में जानकारी: Leaner, Meaner, Faster Animations with requestAnimationFrame, Animating with javascript: from setInterval to requestAnimationFrame) और यह बहुत बेहतर है: HTML5 Video: Synchronizing Playback of Two Videos।

ध्यान दें कि वहां प्रदान किए गए डेमो (जेएसफ़िल्ड पर होस्ट किए गए) के पास जेएस स्रोत पर एक गलत लिंक है। मैं इस नए पेज पर यह अद्यतन:

http://jsfiddle.net/aqUNf/1/

भालू मन ब्राउज़र समर्थन में, इस सुविधा फायरफॉक्स, क्रोम के द्वारा समर्थित है, और सफारी 6 और आईई 10 से (अधिक जानकारी के लिए table देखें)। अन्यथा यह सेट अंतराल पर वापस आ जाता है, चुड़ैल एक ही प्रदर्शन और बैटरी बचत लाभ प्रदान नहीं करता है।

(यह रास्ता है, जो मोज़िला द्वारा वास्तव में एक अच्छा परियोजना है द्वारा Popcorn.js उपयोग करता है) और यहाँ कोड (सीधे डेमो से लिया गया) है:

var videos = { 
    a: Popcorn("#a"),  
    b: Popcorn("#b"), 

}, 
scrub = $("#scrub"), 
loadCount = 0, 
events = "play pause timeupdate seeking".split(/\s+/g); 

// iterate both media sources 
Popcorn.forEach(videos, function(media, type) { 

    // when each is ready... 
    media.listen("canplayall", function() { 

     // trigger a custom "sync" event 
     this.trigger("sync"); 

     // set the max value of the "scrubber" 
     scrub.attr("max", this.duration()); 

    // Listen for the custom sync event...  
    }).listen("sync", function() { 

     // Once both items are loaded, sync events 
     if (++loadCount == 2) { 

      // Iterate all events and trigger them on the video B 
      // whenever they occur on the video A 
      events.forEach(function(event) { 

       videos.a.listen(event, function() { 

        // Avoid overkill events, trigger timeupdate manually 
        if (event === "timeupdate") { 

         if (!this.media.paused) { 
          return; 
         } 
         videos.b.trigger("timeupdate"); 

         // update scrubber 
         scrub.val(this.currentTime()); 

         return; 
        } 

        if (event === "seeking") { 
         videos.b.currentTime(this.currentTime()); 
        } 

        if (event === "play" || event === "pause") { 
         videos.b[ event ](); 
        } 
       }); 
      }); 
     } 
    }); 
}); 

scrub.bind("change", function() { 
    var val = this.value; 
    videos.a.currentTime(val); 
    videos.b.currentTime(val); 
}); 

// With requestAnimationFrame, we can ensure that as 
// frequently as the browser would allow, 
// the video is resync'ed. 
function sync() { 
    videos.b.currentTime( 
     videos.a.currentTime()   
    ); 
    requestAnimFrame(sync); 
} 

sync();