目前很多视频网站都是采用video标签形式，src是blob://http开头,效果如下

blob.png

实现方式，用用H5的MediaSource方法

<head>
    <meta charset="UTF-8">
    <title>blob</title>
</head>

<body>
    <video id="video" controls="controls"></video>
    <script type="text/javascript">
        var video = document.querySelector('video');
        var assetURL = 'https://adtuu-blog.oss-cn-shenzhen.aliyuncs.com/v0-new.mp4';

        // Need to be specific for Blink regarding codecs
        // ./mp4info frag_bunny.mp4 | grep Codec
        // video/mp4; codecs="avc1.42E01E, mp4a.40.2
        //var mimeCodec = 'video/webm;codecs="vorbis,vp8"';
        var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

        if('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
            var mediaSource = new MediaSource();
            video.src = URL.createObjectURL(mediaSource);
            mediaSource.addEventListener('sourceopen', sourceOpen);

        } else {
            console.error('Unsupported MIME type or codec: ', mimeCodec);
        }

        function sourceOpen() {
            console.log(this); // open
            var mediaSource = this;
            var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
            fetchAB(assetURL, function(buf) {
                console.log(buf)
                console.log(sourceBuffer);
                sourceBuffer.addEventListener('updateend', function() {
                    console.log(mediaSource);
                    mediaSource.endOfStream();

                    video.play();
                    console.log(mediaSource.readyState); // ended
                });
                sourceBuffer.appendBuffer(buf);
            });
        };
        function fetchAB(url, cb) {
            console.log(url);
            var xhr = new XMLHttpRequest;
            xhr.open('get', url);

            xhr.responseType = 'arraybuffer';
            xhr.onload = function() {
                console.log(xhr.response);
                cb(xhr.response);
            };
            xhr.send();
        };
    </script>
</body>


另外，有网友写了一个demo，可以看下

http://postbird.gitee.io/postbirdmp4toblob/


源代码

PostbirdMp4ToBlob-master.rar