Question

我正在尝试使用不同的按钮播放多个，但是当我在点击按钮时添加新视频时如何将视频添加到当前缓冲区并刷新旧文件视频。

 <!DOCTYPE html>
 <html>
     <head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
           integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    </head>
<body>
<div class="container" style="margin-top: 200px">
    <div class="col-md-6 col-md-offset-3" style="margin-bottom: 10px">
        <button type="button" class="btn btn-primary" onclick="initVideo('box1.mp4')">Video1</button>
        <button type="button" class="btn btn-primary" onclick="initVideo('box.mp4')">Video2</button>
        <button type="button" class="btn btn-primary" onclick="initVideo(3)">video3</button>
        <button type="button" class="btn btn-primary" onclick="initVideo(4)">video4</button>
    </div>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <video  poster="data:image/gif,AAAA"  controls width="400"height="300" ></video>
        </div>
    </div>
</div>

<script>
    var video = document.querySelector('video');
    var assetURL = "box.mp4";
    // Need to be specific for Blink regarding codecs
    // ./mp4info frag_bunny.mp4 | grep Codec
    var mimeCodec = 'video/mp4; codecs="avc1.64001f, mp4a.40.2"';
    var totalSegments = 1;
    var segmentLength = 0;
    var segmentDuration = 0;
    var bytesFetched = 0;
    var requestedSegments = [];
    var sourceBuffer = null;
    for (var i = 0; i < totalSegments; ++i) requestedSegments[i] = false;
    var mediaSource = null;
    if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
        mediaSource = new MediaSource;
        //console.log(mediaSource.readyState); // closed
        video.src = URL.createObjectURL(mediaSource);
        mediaSource.addEventListener('sourceopen', sourceOpen);
    } else {
        console.error('Unsupported MIME type or codec: ', mimeCodec);
    }

    function initVideo(url) {
        video.remove();
        //video.play()
        assetURL = url;
        console.log(sourceBuffer);
        console.log();
        mediaSource.sourceBuffers[0].appendBuffer
        video.load();;
    }

    function sourceOpen(_) {
        sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
        console.log(mediaSource.readyState);
        getFileLength(assetURL, function (fileLength) {
           // console.log((fileLength / 1024 / 1024).toFixed(2), 'MB');
            //totalLength = fileLength;
            segmentLength = Math.round(fileLength / totalSegments);
            //console.log(totalLength, segmentLength);
            fetchRange(assetURL, 0, segmentLength, appendSegment);
            requestedSegments[0] = true;
            video.addEventListener('timeupdate', checkBuffer);
            video.addEventListener('canplay', function () {

                segmentDuration = video.duration / totalSegments;
                video.play();
                //console.log(mediaSource.readyState);
            });
            video.addEventListener('seeking', seek);
        });
    };

    function getFileLength(url, cb) {
        var xhr = new XMLHttpRequest;
        xhr.open('head', url);
        xhr.onload = function () {
            cb(xhr.getResponseHeader('content-length'));
        };
        xhr.send();
    }
    ;

    function fetchRange(url, start, end, cb) {
        var xhr = new XMLHttpRequest;
        xhr.open('get', url);
        xhr.responseType = 'arraybuffer';
        xhr.setRequestHeader('Range', 'bytes=' + start + '-' + end);
        xhr.onload = function () {
            //console.log('fetched bytes: ', start, end);
            bytesFetched += end - start + 1;
            cb(xhr.response);
        };
        xhr.send();
    }
    ;

    function appendSegment(chunk) {
        sourceBuffer.appendBuffer(chunk);
    }
    ;

    function checkBuffer(_) {
        var currentSegment = getCurrentSegment();
        if (currentSegment === totalSegments && haveAllSegments()) {
            console.log('last segment', mediaSource.readyState);
            mediaSource.endOfStream();
            video.removeEventListener('timeupdate', checkBuffer);
            mediaSource.addEventListener('sourceclose', sourceclose);
        } else if (shouldFetchNextSegment(currentSegment)) {
            requestedSegments[currentSegment] = true;
            console.log('time to fetch next chunk', video.currentTime);
            fetchRange(assetURL, bytesFetched, bytesFetched + segmentLength, appendSegment);
        }
        //console.log(video.currentTime, currentSegment, segmentDuration);
    }
    ;
    function sourceclose () {

    }
    function seek(e) {
        console.log(e);
        if (mediaSource.readyState === 'open') {
            sourceBuffer.abort();
            console.log(mediaSource.readyState);
        } else {
            console.log('seek but not open?');
            console.log(mediaSource.readyState);
        }
    }
    ;

    function getCurrentSegment() {
        return ((video.currentTime / segmentDuration) | 0) + 1;
    }
    ;

    function haveAllSegments() {
        return requestedSegments.every(function (val) {
            return !!val;
        });
    }
    ;

    function shouldFetchNextSegment(currentSegment) {
        return video.currentTime > segmentDuration * currentSegment * 0.8 && !requestedSegments[currentSegment];
    }
    ;

</script>
</body>
</html>

https://github.com/kori002/mediaSource

如何在媒体来源扩展程序中附加新视频并删除旧视频（SourceBuffer）

0 个答案: