SkeyeWebPlayer.js H5播放器开发之webpack编译flv.js实现基础播放器功能

Posted 2022-11-16

SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP、FLV、HLS等多种流媒体协议播放，视频编码支持H.264，H.265，音频支持AAC，支持TCP/UDP协议，是一套极佳的且适合用于综合安防视频云服务播放组件，已经非常稳定、完整。功能包括：直播、录像、抓图，目前在功能性、稳定性、可扩展性和完整性极强的一款H5播放器！

SkeyeWebPlayer.js H5播放器开发之flv.js源码编译及配置, 上一节讲到创建webpack项目，本节将讲编译flv的源码及相关配置。

1.首先下载flv.js源码 【​​传送门​​】，flv.js源码可以直接编译，但是本项目需要自行开发其他的功能，所以说我们需要把它的js代码拿到我们自己的项目中来。

2.把flv源码中src目录下的内容复制到我们自己项目中的src目录下。如图：

3.修改webpack.config.js配置修改打包入口配置。如下：

entry: 
    SkeyeWebPlayer: ./src/flv.js
,

注意：

• 1.路径是指向flv.js而不是index.js
• 2.这样配置的原因是 output 中配置了 libraryExport: default 就不需要 const flvjs = require(./flv.js).default

3.执行编译。编译之后会有一个dist/SkeyeWebPlayer.js，至于出口的目录，可以自己随便设置，如下：

npm run dev

4.打包编译完之后，我们可以新建一个index.html 来看看效果，也可以使用flv里面的demo来看效果，在这之前可以先和src一起复制过来。

（1）、首先准备一个flv的实时直播流地址，如果没有也可以使用 OBS + node-media-server-master 来自己搭建一个实时推流的服务器。

（2）、 ../dist/SkeyeWebPlayer.js 调用的时候在flv中式调用flvjs 而在本项目中，出口中配置了向外暴露SkeyeWebPlayer 所以在调用的时候，调用

SkeyeWebPlayer.createPlayer(mediaDataSource, 
        enableWorker: false,
        lazyLoadMaxDuration: 3 * 60,
        seekType: range,
    )

（3）、最后在video上面设置autoplay muted属性，就可以实现自动播放了。

4.至此编译flv.js源码成为SkeyeWebPlayer.js H5播放器的基础就已经完成，最终效果如下图：