मीडिया स्रोत एपीआई का उपयोग करके मैं स्रोत वीडियो बफर में दो वीडियो फ़ाइलों को कैसे जोड़ूं?

Question

मेरे पास दो वीडियो नाम v11.webm और v12.webm हैं।

मुझे क्या चाहिए यह है कि इन दोनों वीडियो को किसी भी अंतर के बिना निर्बाध रूप से चलाना चाहिए।

मैं स्रोत बफर को डेटा जोड़ने के मीडिया स्रोत एपीआई दृष्टिकोण का पालन कर रहा हूं।

मैं डेमो इस link

पर दिया मुझे लगता है कि उदाहरण के संशोधित और वीडियो बेडौल का हिस्सा हटा दिया है और यह भी बुद्धिमान स्रोत बफर फाइल करने के लिए डेटा संलग्न करने के लिए कोशिश की है बात कर रहा हूँ।

<script> 

var video = document.querySelector('video'); 

window.MediaSource = window.MediaSource || window.WebKitMediaSource; 
if (!!!window.MediaSource) { 
    alert('MediaSource API is not available'); 
} 

var mediaSource = new MediaSource(); 

video.src = window.URL.createObjectURL(mediaSource); 

mediaSource.addEventListener('webkitsourceopen', function(e) { 

    var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"'); 

    for(i=1;i<=2;i++) 
    { 
     (function(i){ 

      GET('v1'+i+'.webm', function(uInt8Array) { 
       var file = new Blob([uInt8Array], {type: 'video/webm'}); 

       var reader = new FileReader(); 
       reader.onload = function(e) { 
       sourceBuffer.append(new Uint8Array(e.target.result));    
       }; 
       reader.readAsArrayBuffer(file); 

      }); 
     })(i); 
    } 

}, false); 

mediaSource.addEventListener('webkitsourceended', function(e) { 
    logger.log('mediaSource readyState: ' + this.readyState); 
}, false); 

function GET(url, callback) { 
// alert(url); 
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', url, true); 
    xhr.responseType = 'arraybuffer'; 
    xhr.send(); 

    xhr.onload = function(e) { 
    if (xhr.status != 200) { 
     alert("Unexpected status code " + xhr.status + " for " + url); 
     return false; 
    } 
    callback(new Uint8Array(xhr.response)); 
    }; 
} 
</script> 

अभी के रूप में वांछित कोड काम नहीं कर रहा:

मेरे कोड इस प्रकार है।

v11.webm और v12.webm फ़ाइल डेटा का एक असंगत मिश्रण है।

यह निर्बाध रूप से नहीं चल रहा है।

Answer 1

जो मैं आपके कोड में लापता हूं वह है: mediaSource.endOfStream();

क्या आप असंगत मिश्रण मुद्दे पर विस्तार कर सकते हैं?

Answer 2

स्पेक बताता है कि प्लेबैक के बीच का अंतर सबसे छोटे ऑडियो फ्रेम से बड़ा नहीं होना चाहिए, क्या आप इसके अनुरूप हैं ?? मुझे नहीं लगता कि यह कहता है कि घटना में क्या करना है, दुर्भाग्य से कोई ऑडियो नहीं है।

Answer 3

शायद थोड़ा देर हो चुकी है, लेकिन मैं इसे समझने में सक्षम था। अपने नए वीडियो पुराने अधिलेखित है, क्योंकि वे दोनों समय 0. पर शुरू आपको लगता है कि अपने नए वीडियो में यह जोड़कर समय से पहले एक्स पर शुरू होता है निर्दिष्ट करने के लिए है, तो अपने 'webkitsourceopen' घटना समारोह होना चाहिए:

/* forget the sourcebuffer variable, we'll just manipulate mediaSource */ 
mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"'); 

/* it seems ok to set initial duration 0 */ 
var duration = 0; 
var totalVideos = 2; 

/* use this type of loop to ensure that that a single video 
    is downloaded and appended before moving on to the next video, 
    mediasource seems picky about these being in order */ 
var i = 0; 
(function readChunk_(i){ 

    /* the GET function already returns a Uint8Array. 
     the demo you linked reads it in filereader in order to manipulate it; 
     you just want to immediately append it */ 
    GET('v1' + (i + 1) + '.webm', function(uint8Array){ 

     if(i == totalVideos) { 
      mediaSource.endOfStream(); 
     } else { 

      /* assuming your videos are put together correctly 
       (i.e. duration is correct), set the timestamp offset 
       to the length of the total video */ 
      mediaSource.sourceBuffers[0].timestampOffset = duration; 

      mediaSource.sourceBuffers[0].append(uint8Array); 

      /* set new total length */ 
      duration = mediaSource.duration; 

      readChunk(++i); 
     } 
    }); 
})(i); 

अब अगर केवल मीडियासोर्स वीडियो की संरचना के बारे में बहुत निराशाजनक रूप से पसंद नहीं करता है तो यह स्वीकार करता है। मुझे अभी तक एक नमूना नहीं मिला है .webm जो आपके द्वारा लिंक किए गए Eric Bidelman's Demo में उपयोग किए गए एक के अलावा काम करता है।

संपादित करें: अधिक परीक्षण करने के बाद, जिस तरह से मैंने अवधि निर्धारित की है वह सही नहीं हो सकता है। यदि आपको प्रत्येक संलग्न करने के बाद घातीय अवधि वृद्धि मिलती है, तो टाइमस्टैम्प ऑफसेट को 0 पर सेट करने का प्रयास करें और इसे बदलना न करें। मुझे नहीं पता कि ऐसा क्यों लगता है, और यह एक समस्या हो सकती है कि मैं वेबएम फाइलें कैसे उत्पन्न कर रहा हूं।