This is the fifth day of my participation in the August Wen Challenge.More challenges in August

We often use the video tag when displaying and playing video in the front page. Currently, the video element supports three video formats: MP4, WebM and Ogg. They use browsers with slightly different compatibility. Compatibility is shown in the following figure:

For the video formats of surveillance videos, such as M3U8 and RTMP, the video label cannot be played. At this time, we can first learn about these two formats. What is M3U8?

When playing M3U8, we will find that many TS files are loaded locally on the console, so the M3U8 file is essentially a playlist, which may be a Media playlist or a master Mster playlist. But whatever playlist is, the text inside it is encoded utF-8.

EasyPlayer easyplayer. js H5 player is a device that can support HTTP, RTMP, HTTP-FLV, HLS (M3U8) video live and video on demand and other protocols. Supports H.264, H.265, AAC and other audio and video encoding formats, supports MSE, WASM and other decoding modes, supports Windows, Linux, Android, iOS all-platform H5 player.

How to use easyPlayer in VUE to realize real-time playback of surveillance video? Install easyWasmPlayer

2, within the components into the import WasmPlayer from “@ easydarwin/easywasmplayer”; 3, new WasmPlayer method new a player, the argument is to display the player dom class name. this.playDomName = new WasmPlayer(null, domId, this.callbackfun, { Height: true }); this.playDomName.play(data.data.url, 1);

The specific implementation code is as follows: