PC端播放H265

说明

需要在PC端浏览器(Chrome)中播放直播视频，视频格式有H264/H265。有不少三方库可以实现。

通过video.js(支持H264，不支持H265)

    
    

    
    
    



Video.js Example Embed

参考地址：

https://github.com/videojs/vi...

https://videojs.com/getting-s...

通过hls.js(支持H264，不支持H265)

    
    
    
    
    


pc play m3u8(hlsjs)

参考地址：

https://github.com/video-dev/...

通过EasyWasmPlayer(支持H264，也支持H265)

普通页面：

    
    
    
    



H265播放器



    

    
列如：http://127.0.0.1:8080/flv/hls/stream.flv 
        在线演示
    
注意：本实例需要以服务方式启动 搭建服务教程
    
    播放

define/require页面：

define([
    "../lib/EasyWasmPlayer.js"
], function (EasyWasmPlayer) {
    var MainView = {
        // ...

        afterRender: function () {
            var that = this;

            // 播放器回调函数，播放、暂停、全屏等会回调
            var callbackfun = function (e) {
                console.log(e);
            };

            // 地址栏
            var value = document.getElementById('value');
            // 实例播放器，注意这里为EasyWasmPlayer，不是WasmPlayer
            var player = new EasyWasmPlayer(null, 'newplay', callbackfun, {
                Height: true
            });

            // 播放按钮
            var btn = document.getElementById('btn');

            //播放事件 传入地址播放
            btn.onclick = function () {
                player.play(value.value, 1);
                console.log(value.value);
            }
        },

    };

    // ...
});

注意：

• new WasmPlayer要改为new EasyWasmPlayer。
• 地址用相对地址"../lib/EasyWasmPlayer.js"，不用"xx/yy/zz/videoplay/lib/EasyWasmPlayer.js"

参考：

https://github.com/tsingsee/E...

注意：要使得EasyPlayer支持h265格式，需要将文件发布到http服务器上，如nginx。将ccc.html,EasyWasmPlayer.js,libDecoder.wasm放入$NGINX_HOME/html下，然后配置：

server {
    listen       7078;
    charset utf-8;
    proxy_connect_timeout 180;
    proxy_send_timeout 180;
    proxy_read_timeout 180;
    
    location / {
      root html;
      index ccc.html;
    }
}

这里监听端口为7078，访问地址：http://localhost:7078/

root html 表示根目录为$NGINX_HOME/html

index ccc.html; 表示默认访问页为：ccc.html

采用EasyPlayer播放H265中遇到的问题（H264无问题）

tomcat部署，播放H265

将ccc.html,EasyWasmPlayer.js,libDecoder.wasm三个文件放入$TOMCAT_HOME/webapps/examples下，然后http://localhost:8080/examples/ccc.html访问，播放H265视频，报错：

Uncaught (in promise) RuntimeError: abort(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 68 74 6d @+0) at Error
    at WA (blob:http://localhost:8080/92fa365d-2fd3-4882-931c-bb6d344138aa:1:15306)
    at PA (blob:http://localhost:8080/92fa365d-2fd3-4882-931c-bb6d344138aa:1:15458)
    at FA (blob:http://localhost:8080/92fa365d-2fd3-4882-931c-bb6d344138aa:1:13489)
    at blob:http://localhost:8080/92fa365d-2fd3-4882-931c-bb6d344138aa:1:14589
    at FA (blob:http://localhost:8080/92fa365d-2fd3-4882-931c-bb6d344138aa:1:13494)
    at blob:http://localhost:8080/92fa365d-2fd3-4882-931c-bb6d344138aa:1:14589

将文件部署到nginx的html下，问题解决。但为何在tomcat上报错呢？

分析
tomcat部署时出现CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 68 74 6d @+0)的原因，通过浏览器Network查看，发现libDecoder.wasm 404错误，说明是未找到libDecoder.wasm导致。
通过nginx将/libDecoder.wasm重定向后，问题可解决。如：

location /libDecoder.wasm {
  proxy_pass http://xxxx/lib/libDecoder.wasm;
  proxy_set_header Host $host:$server_port;
  proxy_set_header X-Real-Ip $remote_addr;
}

这里xxxx/lib/用实际地址。

或者修改EasyWasmPlayer.js中libDecoder.wasm的路径。EasyWasmPlayer.js中搜索'libDecoder.wasm'，改为：

GA=T+"xxx/yyy/libDecoder.wasm";

这里xxx/yyy以实际地址替换。

如果通过springboot启动，可能不会报404错误，只报CompileError: WebAssembly.instantiate():。同样方式解决。

WasmPlayer is not defined

将文件EasyWasmPlayer.js,libDecoder.wasm拷贝到指定目录下。播放，报错：

Uncaught ReferenceError: WasmPlayer is not defined

new WasmPlayer改为new EasyWasmPlayer即可。这里EasyWasmPlayer为文件头部define语句对应的实例。

要解决这个问题，也可以通过另一种变通的方法（不建议）：

因为提示not defined，表示.js文件引的有问题或者用的时候上下文有问题。而不在前端框架中使用时，一点问题没有。
通过查看网页html，发现EasyWasmPlayer.js的引入语句为：

而不是：

在html中，找一个无关紧要的

我们通过nginx，将该文件的引用替换为EasyWasmPlayer.js的引入。

location /portal/frm/portal/system.min.js {
    proxy_pass http://localhost:7072/portal/xxx/yyy/videoplay/lib/EasyWasmPlayer.js;
    proxy_set_header Host $host:$server_port;
    proxy_set_header X-Real-Ip $remote_addr;
}

重启nginx后，问题解决。

Access-Control-Allow-Origin

Access to XMLHttpRequest at 'aaaaaaaaaa.ts' from origin 'http://localhost:7072' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

nginx增加配置add_header Access-Control-Allow-Origin *;：

location /portal/ {
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
  add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
  proxy_pass http://localhost:7072/portal/;
  proxy_set_header Host $host:$server_port;
  proxy_set_header X-Real-Ip $remote_addr;
}

EasyPlayer的其它说明

• libDecoder.wasm文件需要，且路径能访问到
• EasyWasmPlayer.js不用放在根目录，能成功引入就行