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'
},

注意：

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播放器的基础就已经完成，最终效果如下图：

SkeyeWebPlayer.js H5播放器开发之webpack编译flv.js实现基础播放器功能（二）相关推荐

SkeyeWebPlayer.js H5播放器开发之webpack项目创建级编译配置（一）
SkeyeWebPlayer.js H5播放器开发之播放器动态渲染video. 动态渲染是采用js进行创建dom.添加dom.添加class.style等方式操作dom元素.最终将播放器编译成成一个独 ...
跟着王进老师学开发之Python篇第一季：基础入门篇-王进-专题视频课程
跟着王进老师学开发之Python篇第一季:基础入门篇-2859人已学习课程介绍本季课程首先对Python简要介绍,然后演示如何搭建Python的开发环境,以及如何在IDE中调试Py ...
视频教程-跟着王进老师学开发之Python篇第一季：基础入门篇-Python
跟着王进老师学开发之Python篇第一季:基础入门篇教学风格独特,以学员视角出发设计课程,难易适度,重点突出,架构清晰,将实战经验融合到教学中.讲授技术同时传递方法.得到广大学员的高度认可. 王进 ...
flv.js 是一个使用纯JavaScript编写的FLV(HTML5 Flash Video)播放器
1.script引入引入方式 <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.1/flv.js"> ...
3G应用开发之Android 传智播客基础知识总结
3G应用开发之Android Android应用开发之3G 3G应用开发之Android 3G应用开发之Android 应用开发之讲师: 讲师:黎活明北京传智播客教育 www.itcast.c ...
android添加截图功能,Android应用开发之Android 5.0及以上编程实现屏幕截图功能的方法...
本文将带你了解Android应用开发Android 5.0及以上编程实现屏幕截图功能的方法,希望本文对大家学Android有所帮助. 本文实例讲述了Android 5.0及以上编程实现屏幕截图功能 ...
Android 音乐播放器开发之 maven() { url “https://maven.google.com“} 报错
1. 问题描述在安卓音乐播放器开发中, 遇到了一些旧版本的问题, 在新版本的Android Studio 中已经改变了, 故记录一下. 旧版本中,下面这两部分是写在一块的, allprojects ...
easyplayerpro 使用说明_EasyPlayerPro(Windows)流媒体播放器开发之ffmpeg log输出报错
EasyPlayerPro主要基于ffmpeg进行开发,在EasyPlayerPro开发过程中,曾遇到一个相对比较棘手的问题,该问题一般在播放不是很标准的流或者网络情况较差,容易出现丢帧的情况特别容易 ...
EasyPlayerPro(Windows)流媒体播放器开发之ffmpeg log输出报错
EasyPlayerPro主要基于ffmpeg进行开发,在EasyPlayerPro开发过程中,曾遇到一个相对比较棘手的问题,该问题一般在播放不是很标准的流或者网络情况较差,容易出现丢帧的情况特别容易 ...

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

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

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

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

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

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

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

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

SkeyeWebPlayer.js H5播放器开发之webpack编译flv.js实现基础播放器功能（二）相关推荐

最新文章

热门文章

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

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

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

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

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

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

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

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

SkeyeWebPlayer.js H5播放器开发之webpack编译flv.js实现基础播放器功能（二）相关推荐

最新文章

热门文章

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