监控视频播放-easyWasmPlayer.js的使用

2,731 阅读1分钟

这是我参与8月更文挑战的第5天,活动详情查看:8月更文挑战

在前端页面显示视频及播放时,我们常常用到video标签,目前,video元素支持三种视频格式:MP4、WebM、Ogg。他们在使用过程中对浏览器的兼容性稍有不同。兼容性如下图所示:

image.png

对于监控录像的视频格式:m3u8、rtmp等格式,使用video标签是无法进行播放的,这个时候我们可以先了解一下这两种格式。什么是m3u8?

在播放m3u8时我们在控制台会发现在本地会加载很多ts文件, 所以m3u8文件实质上是一个播放列表(playlist),其可能是一个媒体播放列表(Media Playlist),或者是一个主列表(Mster playlist).但无论哪种播放列表,其内部文字使用的都是utf-8编码。

如何播放m3u8文件,我们可以了解easyPlayer EasyPlayer.js H5播放器,是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS(m3u8)视频直播与视频点播等多种协议,支持H.264、H.265、AAC等多种音视频编码格式,支持mse、wasm等多种解码方式,支持Windows、Linux、Android、iOS全平台终端的H5播放器。

那如何在vue中使用easyPlayer实现监控视频的实时播放? 1、安装easywasmplayer

image.png 2、在组件内引入 import WasmPlayer from "@easydarwin/easywasmplayer"; 3、new WasmPlayer方法new一个播放器,参数为显示播放器的dom的类名。 this.playDomName = new WasmPlayer(null, domId, this.callbackfun, { Height: true }); this.playDomName.play(data.data.url, 1);

具体实现代码如下:

image.png