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

Love The Way You Lie 2023-10-13 16:34 54阅读 0赞

一般我们播放本地视频都是使用 video标签，但是**<video> 元素只支持三种视频格式：MP4、WebM、Ogg**，对于在线视频直接使用video是没法播放的，这里介绍几款这两天我在做播放在线监控视频功能时使用过的几款播放器，初次接触流媒体踩了一堆坑，到目前为止对这部分内容都还了解的很浅显，若有问题请在评论区指出，欢迎交流。  
该文章旨在为小白推荐播放方案，谁还不是从小白过来的呢？

### 先介绍几个概念： ###

**流协议:**流协议就是在两个通信系统之间传输多媒体文件的一套规则，它定义了视频文件将如何分解为小数据包以及它们在互联网上传输的顺序，RTMP与 RTSP 是比较常见的流媒体协议。

**HLS：**HLS (HTTP Live Streaming)是Apple的动态码率[自适应技术][Link 1]。主要用于PC和Apple终端的音视频服务。包括一个m3u(8)的索引文件，TS媒体分片文件和key加密串文件。参考:[HLS][]。简单来说，HLS是一种协议，如果你的视频源是[http://xxxx.m3u8][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][FLV _ HTTP-FLV]。  
简单来说就是你的视频源是直播且是[http://xxxx.flv][http_xxxx.flv]，就选择这种协议播放。还有个**websocket-flv**，是基于websocket的。

**RTMP与RTSP：** [什么是RTMP 和 RTSP？它们之间有什么区别？][RTMP _ RTSP]

**H264(AVC)与H265(HEVC)：**都是视频编码，是视频压缩格式，由于视频本身的码流太大，所以需要经过压缩然后再通过网络进行传输，其中H265是H264的升级版，很多播放器无法播放H265视频。

**下列播放器排名不分先后，自己评判。**

**1.西瓜播放器**

**优点：**  
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.h265web.js

![945dedf12d5d4f2a984535fff9f15568.webp][]

2.使用后是目前唯一一个可以满足我需求的播放器，**可以播放hls协议的H.265视频**，主码流的，视频信息如下：![20f84e7c170443e1ab03b6f502ffb853.webp][]

**但问题是很卡！卡爆了的卡!**，但是好歹出现了画面，后改为**辅码流视频源**才播放流畅，视频信息如下：![3735908fbe0946eaa44cc965ce985835.webp][]

**缺点：**  
1.很**占内存**，引入项目后**至少占1个g内存**，而且对h265视频解析是使用canvas绘制的方式(目前好像只有这种方案才能播放)，对比使用video播放来说慢了些。但h265webj内部做了判断，当视频是h264格式的会改为video标签播放。  
2.播放器底部的controll需要自己实现，官网提供的是各种api，提倡自己封装。可参考我这两篇文章自己实现，或自己查阅文档封装。  
[h265web.js 同时播放多个视频，修改官方example 中player.js并重新编译][h265web.js _example _player.js]  
[前端使用hls方式播放h265(HEVC)格式的.ts在线文件，附vue2.x封装h265web.js代码][hls_h265_HEVC_.ts_vue2.x_h265web.js]  
3.控制台**作者给自己打广告**，连播放器要传的参数token都是自己的广告。。。不过问题不大，开源的嘛，可以理解。

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

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

### 3.[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" />
    
      
      
    
      <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是可支持H.264/H.265视频播放的流媒体播放器，性能稳定、播放流畅，可支持的视频流格式有RTSP、RTMP、HLS、FLV、WebRTC等，具备较高的可用性。liveweb还拥有Windows、Android、iOS版本，其灵活的视频能力，极大满足了用户的多样化场景需求。

liveweb具备较强的灵活性，在视频直播过程中liveweb可通过H5进行视频解码，只要客户端支持H5，就能完美进行视频的无插件直播，同时还支持大码率视频直播，并可支持H.264、H.265两种编码格式。![bb667d361ff64aa1918ff78d99110566.webp][]

Liveweb是好游科技自主开发的网页播放器，支持 RTSP、RTMP、HTTP、HLS、UDP、RTP、File 等多种流媒体协议播放，同时也有多种显示方式 (GDI,D3D) 及格式 (RGB24,YV12,YUY2,RGB565)，经过 7x24 小时连续拷机测试，能够很好的处理断连

如果大家正在找寻一款供能强大的流媒体播放器，那么liveweb将会是一个不错的选择，我们也欢迎大家的了解和试用。

[Link 1]: https://links.jianshu.com/go?to=https%3A%2F%2Fbaike.baidu.com%2Fitem%2F%25E8%2587%25AA%25E9%2580%2582%25E5%25BA%2594%25E6%258A%2580%25E6%259C%25AF%2F2209007%3FfromModule%3Dlemma_inlink
[HLS]: https://links.jianshu.com/go?to=https%3A%2F%2Fbaike.baidu.com%2Fitem%2FHLS%2F8328931%3Ffr%3Daladdin
[http_xxxx.m3u8]: https://links.jianshu.com/go?to=http%3A%2F%2Fxxxx.m3u8
[FLV _ HTTP-FLV]: https://www.jianshu.com/p/b90c6ef5972a
[http_xxxx.flv]: https://links.jianshu.com/go?to=http%3A%2F%2Fxxxx.flv
[RTMP _ RTSP]: https://links.jianshu.com/go?to=https%3A%2F%2Fblog.csdn.net%2Fdaocaokafei%2Farticle%2Fdetails%2F127098972
[945dedf12d5d4f2a984535fff9f15568.webp]: https://img-blog.csdnimg.cn/945dedf12d5d4f2a984535fff9f15568.webp
[20f84e7c170443e1ab03b6f502ffb853.webp]: https://img-blog.csdnimg.cn/20f84e7c170443e1ab03b6f502ffb853.webp
[3735908fbe0946eaa44cc965ce985835.webp]: https://img-blog.csdnimg.cn/3735908fbe0946eaa44cc965ce985835.webp
[h265web.js _example _player.js]: https://www.jianshu.com/p/091f2989ccb4
[hls_h265_HEVC_.ts_vue2.x_h265web.js]: https://www.jianshu.com/p/1f98a9b5e316
[videojs]: https://links.jianshu.com/go?to=https%3A%2F%2Fvideojs.com%2Fgetting-started
[bb667d361ff64aa1918ff78d99110566.webp]: https://img-blog.csdnimg.cn/bb667d361ff64aa1918ff78d99110566.webp