h265web.js 同时播放多个视频，修改官方example

简单了解 h265web.js

市场上能找到的支持的能力最多的HEVC/H.265网页播放器。一个可支持HEVC/H.265编码播放360P、480P、540P、720P、1080P的HEVC播放器。h265web.js github地址

我最近在做监控视频在线播放功能时选了多款播放器，最终只有这个可以播放下面这种格式的视频。【虽然卡爆了，到后面画面完全动不了，但至少有画面，其他播放器如xgplayer，videojs，EasyPlayer都无法显示】，这里并不是说其他播放器不好，他们各有各的特点，后面有时间了再讲。

image.png
这个监控视频是hls协议的HEVC(H265)编码格式，而且比较高清，是主码流，后面改为采用辅码流才播放流畅了。这都不是本文重点，下面进入正题，本教程适合想快速在自己项目中同时播放多个HEVC视频流人员：

本篇文章的主题是什么？很简单，就是下面这句话。

image.png

本文演示demo的tag版本 ：h265web.js-20211104，其他tag版本中，有这个example例子的也可以这样修改编译。

image.png

当前这个example是一个官方提供的一个演示demo，启动服务后可快速播放视频看到效果。这个dist-play.js 其实就是操作html中设置的这个controller dom。

image.png

一、修改play.js和index.html

因为官方提供的例子都是根据id去获取的，这样就没法同时播放多个视频。

image.png

全部改为class方式。注意这个id 和class 不一样，需要单独修改

image.png
image.png
同样把下面两个方法也改了
image.png

修改调用方法，添加参数：

image.png image.png

二、修改后编译：

查看package.json文件，修改play.js后需要重新编译

image.png

1. npm i 安装依赖：

2. npm i @babel/core -S

   
   image.png
   

   官网提供的这个demo有问题，不安装@babel/core直接执行 npm start会报错：

   
   image.png
   现在执行：npm start
   编译成功！
   image.png
   

   若遇到以下问题：

   
   image.png
   删除后重新编译即可
   image.png
   image.png

三、查看效果

启动服务器：(没有安装serve的执行安装npm i serve -g或使用其他方式启动服务)

image.png

运行成功：

image.png

四、同时播放多个视频

image.png
image.png image.png

关于版本选择

我这里演示用的v20211104，后发现这个版本在播放hls流时全屏报错，建议选择 v20211204版本或者后面的版本，该版本修复了这个问题。我这里没有选择最新版是因为发现最新版本播放上面那个视频格式的时候卡的不行，低版本反而更流畅，而且最新版没有下面的播放控制栏，ui需要自己搭配h265web.js api实现，不适合新手和急着开发项目的人员。【当然若无特殊需求，能选最新版本当然最好】

image.png

最后，其实这种方式其实并不推荐，因为编译出来的，不适合调试，下篇会提供个vue2.x封装的版本，最新版本中官方提供的demo有vue的demo，是vue3.x的，而且没有底部那个controller。

下篇文章地址:前端使用hls方式播放h265(HEVC)格式的.ts在线文件，附vue2.x封装h265web.js代码

若对你有帮助，请点个赞吧，谢谢支持！
本文地址：https://www.jianshu.com/p/091f2989ccb4，转载请注明出处，谢谢。

参考：
h265web.js github地址