2
SkeyeWebPlayer.js H5播放器开发之webpack编译flv.js实现基础播放器功能（二）
source link: https://blog.51cto.com/openskeye/5851770
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
SkeyeWebPlayer.js H5播放器开发之webpack编译flv.js实现基础播放器功能（二）
精选 原创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'
},
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',
})
enableWorker: false,
lazyLoadMaxDuration: 3 * 60,
seekType: 'range',
})
（3）、最后在video上面设置autoplay muted属性，就可以实现自动播放了。
4.至此编译flv.js源码成为SkeyeWebPlayer.js H5播放器的基础就已经完成，最终效果如下图：
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK