MSE H265 支持调查

最新推荐文章于 2024-08-22 16:25:44 发布

石走刀口

最新推荐文章于 2024-08-22 16:25:44 发布

阅读量1.9k

点赞数 1

分类专栏： web 文章标签： mse html5 前端 javascript

本文链接：https://blog.csdn.net/sinat_27720649/article/details/121633665

版权

web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文探讨了利用Media Source Extensions (MSE) 在浏览器中播放H265编码视频的可能性。虽然MSE通常用于处理H264视频，但作者通过测试证实H265编码的视频流也可以通过MSE播放。然而，兼容性问题突出，主要限于360浏览器和部分移动端内核。提供的测试代码展示了一个简单的MSE实现，并推荐了一个在线测试工具以检查浏览器的H265支持情况。

摘要由CSDN通过智能技术生成

MSE api 经常用于浏览器视频播放中，一般用来将H264 等编码的视频打包成fmp4，然后喂给video 标签实现流媒体播放。于是猜想既然video 标签能直接支持播放的，MSE 理论上也能进行流式播放，那么H265 编码的视频流是不是也能通过MSE 播放呢？

答案是肯定的！但悲催的是chrome 浏览器等不支持H265 编码，国内支持H.265 的浏览器只有360 安全/极速浏览器桌面端，QQ/微信手机端内置浏览器，也就是说小程序好歹是用的。以下是我的测试代码（摘抄自MDN ，需要起一个http 服务，mp4文件需要是fmp4格式）。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <video controls></video>
    <script>
      var video = document.querySelector('video');

      var assetURL = 'frag_bunny.mp4';
	  assetURL = "fragment.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"';
	  mimeCodec = 'video/mp4; codecs="hvc1.2.4.H123.B0"';

      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 {
		alert("不支持h265解码:" + mimeCodec);
        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();
      };
    </script>
  </body>
</html>

更简单的办法是在这个网站直接测试

Media Capabilities | Axinom Media Toolshttps://tools.axinom.com/capabilities/media?cd=h265&h265-se=hev1,hev2,hvc1,hvc2&h265-p=m