浏览器不需要安装插件，前端播放在线视频方案，几款播放器介绍，hls协议下的h.265视频播放方案推荐

一般我们播放本地视频都是使用 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视频，个人非常推荐！

播放效果：

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都是自己的广告。。。不过问题不大，开源的嘛，可以理解。

image.png

4.还有个问题，在 tag v20211104 和最新版本 tag v20220916 播放上面那个主码流 hls协议的H.265视频时发现，低版本 tag v20211104 反而更流畅？猜测是后续版本迭代升级后体积变大，占用更多内存，导致后面的版本播放更卡顿。

若因为卡顿导致播放延迟，可进行 追帧设置，动态更改播放倍数 优化。我并未实现相关代码，因为调试起来太麻烦了，监控是内网视频，没法在线调试。。。目前来说播放效果都比较好，延迟也不高，几秒左右。

播放效果：

4. videojs

一个比较成熟的方案，用的人比较多，但我没怎么用过，我大概测试了下， 可播放hls协议下h.264视频 ，但 不支持播放hls 协议下的h.265视频 ，然后我就pass 掉了。
测试播放.m3u8后缀视频源html代码：

<html lang="en">
  <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>
<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>
参考：videojs 播放.M3U8格式视频
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服务