基于video+flv.js+react-player插件的视频自定义控件用户选择播放开始时间和结束时间

了旧

已于 2022-08-05 21:33:14 修改

阅读量1.5k

点赞数

分类专栏： JavaScript react flv.js 文章标签：音视频 javascript 前端

于 2022-08-05 21:32:23 首次发布

本文链接：https://blog.csdn.net/weixin_44685906/article/details/126185624

版权

基于video+flv.js+react-player插件的视频自定义控件用户选择播放开始时间和结束时间

- 需求
- 解决方案

需求

实习的时候，由于业务需求，需要播放.flv视频。这就需要使用由B站开源的插件flv.js实现，flv.js将流视频进行解析，然后传给H5的vide标签进行播放，项目里我使用了一个已经基于flv.js+video封装好的插件react-player。
在具体的业务需求中，视频播放前必选由用户选择播放的开始时间和结束时间，然后点击播放该时间段内的视频内容。在到达结束时间前，用户可以随时点击暂停和播放。点击暂停后，再重新播放时需要从上一次暂停的地方开始播放

解决方案

用户设置开始/结束时间
这里需要使用antd的RangePicker控件进行页面设计。并且监听onChange()，当开始/结束时间确定后触发此函数，在该函数内，通过函数的dateString参数（是一个数组）来获取用户的开始/结束时间，并保存到state中。

  onChange = (value, dateString) => {
   
    //由于视频文件暂时使用本地文件，所以此处只获取单位为秒的时间，后续根据实际或许整个时间段
    let start = dateString[0].split(' ')[1].split(':')[2]
    let end = dateString[1].split(' '