说明

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

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

videojs-contrib-hls embed

Video.js Example Embed

data-setup='{}'>

参考地址：

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

pc play m3u8(hlsjs)

video {

width: 600px;

height: auto;

}

pc play m3u8(hlsjs)

var video = document.getElementById('video');

var videoSrc = 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8';

if (Hls.isSupported()) {

var hls = new Hls();

hls.loadSource(videoSrc);

hls.attachMedia(video);

hls.on(Hls.Events.MANIFEST_PARSED, function () {

video.play();

});

}

// hls.js is not supported on platforms that do not have Media Source

// Extensions (MSE) enabled.

//

// When the browser has built-in HLS support (check using `canPlayType`),

// we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video

// element through the `src` property. This is using the built-in support

// of the plain video element, without using hls.js.

//

// Note: it would be more normal to wait on the 'canplay' event below however

// on Safari (where you are most likely to find built-in HLS support) the

// video.src URL must be on the user-driven white-list before a 'canplay'

// event will be emitted; the last video event that can be reliably

// listened-for when the URL is not on the white-list is 'loadedmetadata'.

else if (video.canPlayType('application/vnd.apple.mpegurl')) {

video.src = videoSrc;

video.addEventListener('loadedmetadata', function () {

video.play();

});

}

参考地址：

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

普通页面：

EasyWasmPlayer

H265播放器

// 播放器回调函数

callbackfun = function (e) {

console.log(e);

}

// 播放按钮

var btn = document.getElementById('btn');

// 地址栏

var value = document.getElementById('value');

// 实例播放器

var player = new WasmPlayer(null, 'newplay', callbackfun, {

Height: true

})

//播放事件 传入地址播放

btn.onclick = function () {

player.play(value.value, 1);

console.log(value.value);

}

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"

参考：

注意：要使得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;

}

}

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后，问题解决。

EasyPlayer的其它说明libDecoder.wasm文件需要，且路径能访问到

EasyWasmPlayer.js不用放在根目录，能成功引入就行