一般我们播放本地视频都是使用 video标签，但是<video> 元素只支持三种视频格式：MP4、WebM、Ogg，对于在线视频直接使用video是没法播放的，这里介绍几款这两天我在做播放在线监控视频功能时使用过的几款播放器，初次接触流媒体踩了一堆坑，到目前为止对这部分内容都还了解的很浅显，若有问题请在评论区指出，欢迎交流。
该文章旨在为小白推荐播放方案，谁还不是从小白过来的呢？
先介绍几个概念：
流协议:流协议就是在两个通信系统之间传输多媒体文件的一套规则，它定义了视频文件将如何分解为小数据包以及它们在互联网上传输的顺序，RTMP与 RTSP 是比较常见的流媒体协议。
HLS：HLS (HTTP Live Streaming)是Apple的动态码率自适应技术。主要用于PC和Apple终端的音视频服务。包括一个m3u(8)的索引文件，TS媒体分片文件和key加密串文件。参考:HLS。简单来说，HLS是一种协议，如果你的视频源是http://xxxx.m3u8这种，就选择这种协议，.m3u8是个文本文件，直播时，他的内容实时变更，内部指向一个或多个.ts文件。
HTTP-FLV: HTTP-FLV 是将音视频数据以 FLV 文件格式进行封装，再将 FLV 格式数据封装在 HTTP 协议中进行传输的一种流媒体传输方式。HTTP-FLV 的实现原理： HTTP-FLV 利用 HTTP/1.1 分块传输机制发送 FLV 数据。虽然直播服务器无法知道直播流的长度，但是 HTTP/1.1 分块传输机制可以不填写 conten-length 字段而是携带 Transfer-Encoding: chunked 字段，这样客户端就会一直接受数据。参考：FLV 和 HTTP-FLV。
简单来说就是你的视频源是直播且是http://xxxx.flv，就选择这种协议播放。还有个websocket-flv，是基于websocket的。
RTMP与RTSP： 什么是RTMP 和 RTSP？它们之间有什么区别？
H264(AVC)与H265(HEVC)：都是视频编码，是视频压缩格式，由于视频本身的码流太大，所以需要经过压缩然后再通过网络进行传输，其中H265是H264的升级版，很多播放器无法播放H265视频。
下列播放器排名不分先后，自己评判。
1.西瓜播放器- xgplayer
我使用的版本：
优点：
1.官网教程非常简单清晰，上手快。这点个人认为尤其重要，小白哪懂那么多，就冲这个点个大大的赞！
2.使用起来体验感很好
3.支持直播点播，支持hls，http+flv，dash，WebRTC直播，还有音乐播放器
4.提供在线可调试demo
缺点：
1.xgplayer-hls.js不能播放hls H.265视频，因为是基于hls.js封装的，hls.js支持H264，不支持H265。
2.xgplayer-hls测试后发现同样不能播放hls H.265视频。
3.播放不同的视频需要自己切换对应的包，如xgplayer-flv.js，xgplayer-hls.js（也可以算是优点，包体积更小，更灵活，看你怎么评判了）
我一开始选取的这款播放器，但很遗憾，我的监控视频是hls协议的H.265视频，没法播放。。。但总的来说如果不播放H.265视频，个人非常推荐！
播放效果：
2.EasyPlayer.js
首先有的博客用的这个@easydarwin/easywasmplayer，但在npm上看到这个包不再支持了，我没用过这个包，感兴趣的自己尝试。
我用的是这个：EasyPlayer.js
版本如下：
优点：
1.内部自动识别视频格式，自动使用对应方法解码。
缺点：
1.文档错误，不友好，按照文档指示 npm install @easydarwin/easyplayer --save 后没有找到官方说的EasyPlayer.swf文件
我在4.0.7版本中才找到这个文件。
但是直接下载官方demo后跑起来发现，不需要这个文件也行，因此应该是官方文档没有更新。（若遇到vue demo运行报错，可能是nodejs 版本问题）
2.右键播放器有弹窗，（解决办法：自己设置样式隐藏）
<style>
// 隐藏弹窗
.easy-player-right-menu{
display: none !important;
}
</style>
3.该播放器是支持播放h265视频的，但应该是指的flv格式的(我未测试过)， 实测时发现不支持播放hls 协议下的h265视频
播放效果：
3.h265web.js
优点：
1.详情见官方文档，篇幅有限不一一列举
2.使用后是目前唯一一个可以满足我需求的播放器，可以播放hls协议的H.265视频，主码流的，视频信息如下：
但问题是很卡！卡爆了的卡!，但是好歹出现了画面，后改为辅码流视频源才播放流畅，视频信息如下：
缺点：
1.很占内存，引入项目后至少占1个g内存，而且对h265视频解析是使用canvas绘制的方式(目前好像只有这种方案才能播放)，对比使用video播放来说慢了些。但h265webj内部做了判断，当视频是h264格式的会改为video标签播放。
2.播放器底部的controll需要自己实现，官网提供的是各种api，提倡自己封装。可参考我这两篇文章自己实现，或自己查阅文档封装。
h265web.js 同时播放多个视频，修改官方example 中player.js并重新编译
前端使用hls方式播放h265(HEVC)格式的.ts在线文件，附vue2.x封装h265web.js代码
3.控制台作者给自己打广告，连播放器要传的参数token都是自己的广告。。。不过问题不大，开源的嘛，可以理解。
4.还有个问题，在tag v20211104和最新版本 tag v20220916播放上面那个主码流 hls协议的H.265视频时发现，低版本tag v20211104反而更流畅？猜测是后续版本迭代升级后体积变大，占用更多内存，导致后面的版本播放更卡顿。
扩展：
若因为卡顿导致播放延迟，可进行追帧设置，动态更改播放倍数优化。我并未实现相关代码，因为调试起来太麻烦了，监控是内网视频，没法在线调试。。。目前来说播放效果都比较好，延迟也不高，几秒左右。
播放效果：
4.videojs
一个比较成熟的方案，用的人比较多，但我没怎么用过，我大概测试了下，可播放hls协议下h.264视频，但不支持播放hls 协议下的h.265视频，然后我就pass 掉了。
测试播放.m3u8后缀视频源html代码：
<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>
5.rtsp流纯前端播放方案 express+ffmpeg+flvjs
这种方案延迟较低，纯前端实现rtsp+websocket-flv播放。
前端播放器只要支持websocket-flv就行，不一定非要是flv.js，还需要启动nodejs后台服务，要注意的是这台运行node服务的服务器上必须要安装ffmpeg，最好是设置环境变量，若未设置则nodejs 代码里也要改下路径。该方案大概原理是nodejs内部通过执行ffmpeg命令实现对rtsp流转flv，然后通过websocket将flv流发送到前端，前端使用flv.js 播放,注意，这个播放是基于websocket协议的。
这里我用vlc模拟rtsp流，然后启动node服务
前端使用flv.js将rtsp视频源传给node服务转码，成功播放视频！
参考教程：里面基本都有源码，思路都是一样的，但异常情况需要自己处理，比如断流，延迟等。
html5中播放rtsp流实现监控、直播等方案
RTSP流媒体播放器
如何实现 RTSP 视频播放？HTML5 播放 RTSP 视频案例分享！
【前端】rtsp 与 rtmp 视频流的播放方法
测试流搭建：
VLC搭建简单的RTSP流媒体服务器
vlc搭建rtsp服务器作为测试流
感谢有这么多优秀的库供我们选择，大家努力吧，争取以后写个自己的库让别人使用！
以上就是本篇文章全部内容了，写了这么多，若对你有帮助，请点个赞吧，谢谢支持！
本文地址：https://www.jianshu.com/p/95869f3519b1，转载请注明出处，谢谢。
参考：
见正文，引用较多，不一一列举了。
