Generally, we use the video tag to play local videos, but the <video> element only supports three video formats: MP4, WebM, and Ogg . Online videos cannot be played directly using video. Here are a few that I have used in the past two days. I have used several players when playing online surveillance video functions. I encountered a lot of pitfalls when I first came into contact with streaming media. So far, I still have a very basic understanding of this part of the content. If you have any questions, please point them out in the comment area. Welcome to communicate. .
This article aims to recommend playback options for Xiaobai. Who hasn’t come from Xiaobai?
Let’s first introduce a few concepts:
Streaming protocol: A streaming protocol is a set of rules for transmitting multimedia files between two communication systems. It defines how video files will be decomposed into small data packets and the order in which they are transmitted on the Internet. RTMP and RTSP are the more common streams. Media Agreement.
HLS: HLS (HTTP Live Streaming) is Apple's dynamic bit rate adaptation technology . Mainly used for audio and video services on PCs and Apple terminals. Includes an m3u(8) index file, TS media fragment file and key encrypted string file. Reference: HLS . To put it simply, HLS is a protocol. If your video source is http://xxxx.m3u8 , choose this protocol. .m3u8 is a text file. During live broadcast, its content changes in real time, and internally points to a or multiple .ts files.
HTTP-FLV: HTTP-FLV is a streaming media transmission method that encapsulates audio and video data in the FLV file format, and then encapsulates the FLV format data in the HTTP protocol for transmission. Implementation principle of HTTP-FLV: HTTP-FLV uses the HTTP/1.1 chunked transmission mechanism to send FLV data. Although the live broadcast server cannot know the length of the live stream, the HTTP/1.1 chunked transmission mechanism can not fill in the content-length field but carry the Transfer-Encoding: chunked field, so that the client will always accept data. Reference: FLV and HTTP-FLV .
To put it simply, if your video source is live broadcast and is http://xxxx.flv , choose this protocol to play. There is also websocket-flv , which is based on websocket.
RTMP vs. RTSP: What are RTMP and RTSP? What's the difference between them?
H264 (AVC) and H265 (HEVC): They are both video encodings and video compression formats. Since the code stream of the video itself is too large, it needs to be compressed and then transmitted through the network. H265 is an upgraded version of H264. Many players The device cannot play H265 videos.
The following players are ranked in no particular order, judge for yourself.
1.Watermelon player
Advantages:
1. The official website tutorial is very simple and clear, and you can get started quickly. This
2. It has a good experience to use
3. Supports live broadcast on demand, supports hls, http+flv, dash, WebRTC live broadcast, and music player
4. Provides online debuggable demo
Disadvantages:
1.xgplayer-hls.js cannot play hls H.265 videos because it is encapsulated based on hls.js. hls.js supports H264 but does not support H265.
2. After testing xgplayer-hls, we found that it also cannot play hls H.265 videos.
3. To play different videos, you need to switch to the corresponding package, such as xgplayer-flv.js, xgplayer-hls.js (it can also be regarded as an advantage, the package size is smaller and more flexible, it depends on how you judge)
I chose this player at the beginning, but unfortunately, my surveillance video is an H.265 video with HLS protocol and cannot be played. . . But in general, if you don’t want to play H.265 videos, I highly recommend it!
2.h265web.js
2. After using it, it is currently the only player that can meet my needs. It can play H.265 video with hls protocol , main stream, and the video information is as follows:
But the problem is that it’s very stuck! The card exploded!, but the picture appeared anyway. After changing to the auxiliary stream video source , it played smoothly. The video information is as follows:
Disadvantages:
1. It takes up a lot of memory . After introducing the project, it takes up at least 1 GB of memory . Moreover, h265 video analysis uses canvas drawing (currently it seems that only this solution can be played), which is slower than using video playback. However, h265webj has made an internal judgment. When the video is in h264 format, it will be played with the video tag.
2. The control at the bottom of the player needs to be implemented by yourself. The official website provides various APIs and encourages encapsulation by yourself. You can refer to these two articles of mine to implement it yourself, or check the documentation for encapsulation yourself.
h265web.js plays multiple videos at the same time. Modify the player.js in the official example and recompile
the front-end to use hls mode to play .ts online files in h265 (HEVC) format. Attached is the vue2.x encapsulated h265web.js code
3. The console author gives If you advertise yourself , even the parameter token to be passed by the player is your own advertisement. . . But it’s not a big problem. It’s open source, so it’s understandable.
4. There is another question. When playing the H.265 video with the main stream HLS protocol between tag v20211104 and the latest version tag v20220916 , I found that the lower version tag v20211104 is smoother? It is speculated that subsequent versions have become larger in size and occupied more memory after iterative upgrades, resulting in later versions having more laggy playback.
Extension:
If playback is delayed due to lagging, frame tracking settings can be set to dynamically change the playback multiple for optimization. I have not implemented the relevant code because it is too troublesome to debug. The monitoring is intranet video and cannot be debugged online. . . At present, the playback effect is relatively good, and the delay is not high, about a few seconds.
Video 3
A relatively mature solution, used by many people, but I haven’t used it much. I probably tested it and it can play h.264 videos under the hls protocol , but it does not support playing h.265 videos under the hls protocol . Then I Just passed it.
Test playback.m3u8 suffix video source html code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>videoJs</title>
<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<section id="videoPlayer">
<video id="example-video" width="600" height="300" class="video-js vjs-default-skin vjs-big-play-centered" poster="">
<source src="http://rm03.wscdn.hls.xiaoka.tv/live/fczjp0Dc_J60VGMN/playlist.m3u8" type="application/x-mpegURL" id="target">
</video>
</section>
<script type="text/javascript">
var player = videojs('example-video', { "poster": "", "controls": "true" }, function() {
this.on('play', function() {
console.log('正在播放');
});
//暂停--播放完毕后也会暂停
this.on('pause', function() {
console.log("暂停中")
});
// 结束
this.on('ended', function() {
console.log('结束');
})
});
</script>
</body>
</html>
4.liveweb
iveweb is a streaming media player that supports H.264/H.265 video playback. It has stable performance and smooth playback. It supports video streaming formats such as RTSP, RTMP, HLS, FLV, WebRTC, etc., and has high usability. liveweb also has Windows, Android, and iOS versions. Its flexible video capabilities greatly meet the diverse scene needs of users.
Liveweb has strong flexibility. During the live video broadcast, Liveweb can decode the video through H5. As long as the client supports H5, the video can be perfectly live broadcast without plug-ins. It also supports high bit rate video live broadcast and can support H .264 and H.265 two encoding formats.
Liveweb is a web player independently developed by Haoyou Technology. It supports RTSP , RTMP , HTTP , HLS , UDP , RTP , File and other streaming media protocols. It also has a variety of display methods (GDI, D3D) and formats (RGB24, YV12, YUY2, RGB565) , after 7x24 hours continuous copy test, it can handle disconnection very well
If you are looking for a streaming media player with powerful power supply, then liveweb will be a good choice. We also welcome everyone to understand and try it out.