MSE学习日记 —— 播放H265视频

在MDN中找到样例(MediaSource - Web APIs | MDN (mozilla.org))

新建MSEDemo.html

<html><head>
  <meta charset="utf-8">
</head>
<body>
  <video controls="" width="1600" height="900"></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 (e) {
      console.log(this.readyState); // open
      var mediaSource = e.target;
      var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
      fetchAB(assetURL, function (buf) {
        sourceBuffer.addEventListener('updateend', function (_) {
          mediaSource.endOfStream();
          video.play();
          //console.log(mediaSource.readyState); // ended
        });
        console.log("buf",buf);
        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>

2. 将样例视频（frag_bunny.mp4）放置在与html文件同一文件夹内。 3. 双击打开MSEDemo.html

踩坑一：浏览器报错

Access to XMLHttpRequest at 'file:///C:/Users/%E9%99%88%E4%B8%BD%E8%8E%8E/Desktop/MSE/frag_bunny.mp4' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted. 根据错误信息大概知道原因在于使用了 File 协议，应该使用它提示的 http, data, chrome, chrome-extension, chrome-untrusted, https 这些协议。

解决方法：

使用VS code插件live Server运行(使用Nodejs搭建本地静态服务器 - 掘金 (juejin.cn))
本地使用nodejs搭建本地服务器（node.js搭建本地服务器 - 掘金 (juejin.cn)）

介绍使用nodejs搭建本地服务器方式：

下载安装nodejs
npm init -y 创建node项目并生成package.json
引入express npm install express
新建static文件夹放入视频文件此时的目录结构如下：
新建myServer.js

var express = require('express')
var path = require('path')
var app = express()

app.get('/', (req, res) => {
  res.send('Hello World!')
})
app.get('/frag_bunny.mp4', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*')//解决跨域问题
  res.sendFile(path.join(__dirname, 'static/frag_bunny.mp4'));
})

app.listen(8083, () => {
  console.log('Server is runing at http://localhost:8083');
})

6. 在终端输入node myServer.js 运行本地服务器

7. 将MSEDemo.html中的视频地址改成服务器访问地址

双击MSEDemo.html文件可以运行

踩坑二：只能播放样例视频，别的fmp4视频无法点播

解决方法：

使用Bento4（链接：pan.baidu.com/s/1nwYQt1MK… 提取码：0o5z）转换视频格式

下载Bento4并解压，在该文件目录\Bento4-SDK-1-6-0-641.x86_64-microsoft-win32\bin下运行cmd,打开命令行窗口输入.\mp4fragment.exe .\1080ph265.mp4 1080ph265_new.mp4
注：待转换视频可直接置于bin目录下，当前转换视频为fmp4的h265视频，1080ph265_new.mp4即为转换好的视频

踩坑三：获取点播视频源的codec

打开链接(gpac.github.io/mp4box.js/t…

将MSEDemo.html中的codecs改成对应值

双击MSEDemo.html运行即可

完整代码及视频文件地址（Stu1125/MSE (github.com)）