说明
需要在PC端浏览器(Chrome )中播放实时视频。 视频格式为H264/H265。 很多三方库都可以实现。
通过video.js (支持H264，不支持H265 ) )。
video js-contrib-hlsembedvideo.jsexampleembed
data-setup='{} '
参照：
通过hls.js (支持H264，不支持H265 ) )
PCplayM3U8(HLSjs ) video {
width: 600px；
height :自动；
}
PCplayM3U8(HLSjs ) var video=document.getelementbyid ) ) video )；
varvideosrc=' http://IVI.bupt.edu.cn/HLS/CCTV 1hd.m3 u8 '；
if(HLS.issupported () ) }
var hls=new Hls (；
HLS.loadsource(videosrc )；
HLS.attachmedia(video )；
HLS.on (HLS.events.manifest _ parsed，function () )。
video.play (；
)；
}
//HLS.jsisnotsupportedonplatformsthatdonothavemediasource
//扩展(MSE )已启用。
//
//whenthebrowserhasbuilt-inhlssupport (check using ` canplaytype ` )、
//wecanprovideanhlsmanifest (I.e . m3 u8 URL ) directly to the video
//element through the ` src ` property.thisisusingthebuilt-in support
//of the plain video element，without using hls.js。
//
//note : itwouldbemorenormaltowaitonthe ' can play ' eventbelowhowever
//onsafari (whereyouaremostlikelytofindbuilt-inhlssupport ) the
//video.srcurlmustbeontheuser-driven white-listbeforea ' can play '
//event will be emitted； thelastvideoeventthatcanbereliably
//listened-forwhentheurlisnotonthewhite-listis ' loaded metadata '。
else if (video.canplaytype (application/vnd.apple.mpegurl ) ) }
video.src=videoSrc；
video.addevent listener (' loaded metadata '，function ) {
video.play (；
)；
}
参照：
通过EasyWasmPlayer (既支持H264也支持H265 ) ) )。
普通页面：
EasyWasmPlayer H265播放器如下。 http://127.0.0.1:8080/flv/HLS/stream.flv
在线演示
注：此实例必须作为服务启动
href=' https://blog.csdn.net/weixin _ 43194037/article/details/10885134 ' target=' _ blank '生成服务教程
播放
//播放器回调函数
callbackfun=function(e ) {
console.log(e )；
}
//播放按钮
var BTN=document.getelementbyid (BTN )；
//地址栏
varvalue=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不用放在根目录，能成功引入就行