Cách tạo Phân đoạn khởi tạo của video trên web để sử dụng với API nguồn truyền thông

Question

Tôi đang xây dựng một ứng dụng nhỏ sử dụng API MediaRecoder để tách video mã hóa khỏi webcam và tải tất cả phần lên máy chủ.
Tôi thấy rằng với API nguồn truyền thông, tôi cần phát phần đầu tiên và sau đó phát bất kỳ phần nào khác.

Theo http://www.w3.org/TR/media-source/#examples Tôi cần "Phân đoạn khởi tạo" ở đầu tệp.

Làm cách nào để tạo "Phân đoạn khởi tạo" của WebM trong JS để tôi có thể phát bất kỳ phần nào mình chọn. Có lib cho điều đó không? (Tôi không có kiến ​​thức về định dạng dòng byte WebM)

Answer 1

Bạn cần phải sử dụng phần mở rộng nguồn phương tiện truyền thông

Vui lòng tham khảo bên dưới ví dụ

<script> 
    var appendID = "123"; 

    function onOpen(e) { 
    var video = e.target; 

    var headers = GetStreamHeaders(); 

    if (headers == null) { 
     // Error fetching headers. Signal end of stream with an error. 
     video.sourceEndOfStream(HTMLMediaElement.EOS_NETWORK_ERR); 
    } 

    video.sourceAddId(appendID, 'video/webm; codecs="vorbis,vp8"'); 

    // Append the stream headers (i.e. WebM Header, Info, and Tracks elements) 
    video.sourceAppend(appendID, headers); 

    // Append some initial media data. 
    video.sourceAppend(appendID, GetNextCluster()); 
    } 

    function onSeeking(e) { 
    var video = e.target; 

    // Abort current segment append. 
    video.sourceAbort(appendID); 

    // Notify the cluster loading code to start fetching data at the 
    // new playback position. 
    SeekToClusterAt(video.currentTime); 

    // Append clusters from the new playback position. 
    video.sourceAppend(appendID, GetNextCluster()); 
    video.sourceAppend(appendID, GetNextCluster()); 
    } 

    function onProgress(e) { 
    var video = e.target; 

    if (video.sourceState == video.SOURCE_ENDED) 
     return; 

    // If we have run out of stream data, then signal end of stream. 
    if (!HaveMoreClusters()) { 
     video.sourceEndOfStream(HTMLMediaElement.EOS_NO_ERROR); 
     return; 
    } 

    video.sourceAppend(appendID, GetNextCluster()); 
    } 

    var video = document.getElementById('v'); 
    video.addEventListener('sourceopen', onOpen); 
    video.addEventListener('seeking', onSeeking); 
    video.addEventListener('progress', onProgress); 
</script> 


<video id="v" autoplay> </video> 

<script> 
    var video = document.getElementById('v'); 
    video.src = video.mediaSourceURL; 
</script>