web 播放fmp4

最新推荐文章于 2024-07-30 20:29:43 发布

逝水流年丶轻染尘

最新推荐文章于 2024-07-30 20:29:43 发布

阅读量1.6k

点赞数

分类专栏：音视频

本文链接：https://blog.csdn.net/qq_18286031/article/details/107112571

版权

音视频专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

逝水流年丶轻染尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web 播放fmp4

web 播放fmp4 demowebsocket+fmp4<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>HTML5视频直播测试</title></head><body> <button onclick="disableMute()" type="button">打开声
复制链接

扫一扫

专栏目录