web 播放fmp4

web 播放fmp4 demo
websocket+fmp4
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>HTML5视频直播测试</title>
</head>

<body>
	<button onclick="disableMute()" type="button">打开声音</button>
	<button onclick="enableMute()" type="button">关闭声音</button>
    <video id="mse" muted width="1280" height="720"></video>
    <script>
        var video = document.querySelector('video');
        var assetURL = 'frag_bunny.mp4';
        // Need to be specific for Blink regarding codecs
        // ./mp4info frag_bunny.mp4 | grep Codec
        var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

        if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
            var 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 sourceOpen(_) {
            //console.log(this.readyState); // open
            var mediaSource = this;
            var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
            fetchAB(assetURL, function (buf) {
                sourceBuffer.addEventListener('updateend', function (_) {
                    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 () {
                cb(xhr.response);
            };
            xhr.send();
        };
		function enableMute()
		{ 
			video.muted=true;
		} 
		function disableMute()
		{ 
			video.muted=false;
		} 
    </script>
</body>

</html>
猜你喜欢
