利用videojs进行视频回放

最近换了新工作，公司用了现在比较流行的spring cloud微服务+vue实现前后端分离开发，由于之前都没有接触过vue，基本相当于从0开始，写下博客，记录下开发过程中的采坑之旅。

最近用到了video.js来开发视频直播和视频按时间间隔的保存，这样就在项目中实现视频的回放。

前端支持2种格式播放，flv和MP4，MP4的好处是有倍率播放，所以flv视频需要在后台转换为MP4。

this.playerOptions = [];
          if (null!=row) {
            let option = {
              name: row.cameraName,
              height: '360',
              autoplay: false,
              muted: true,
              language: 'zh-CN',
              playbackRates: [0.7, 1.0, 1.5, 2.0],
              sources: [{
              //  type: "video/x-flv",
               // src:'xxx.flv'
                type: "video/mp4",
                src:'xxx.mp4'
              }],
              liveui: true,
              notSupportedMessage: '此视频暂无法播放，请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。
            };
            this.playerOptions.push(option);

项目中可以使用ffmpeg命令的工具用的是GitHub上别人的开源的代码

https://github.com/eguid/FFCH4J

通过这个工具可以在java代码里进行ffmpeg命令的调用。

想要实现直播视频自动保存，需要在srs.conf中配置如下内容

vhost __defaultVhost__ {

    http_remux {
            enabled     on;
            mount [vhost]/[app]/[stream].flv;
            hstrs    on;
        }
        #保存完flv后回调-包含flv路径等信息
    http_hooks {
            enabled         on;
            on_dvr          http://192.168.1.231:8083/t-dis-video/out/save;
        }    
    #保存直播为flv
    dvr {
        enabled         on;
        dvr_path        /home/uploadImg/video/[app]/[stream].[timestamp].flv;#保存flv路径
        dvr_plan        segment;#时间模式
        dvr_duration    600;#600秒
        dvr_wait_keyframe       on;
        time_jitter             full;
 
   }

}

这样在保存flv视频的时候会自动每个10分钟回调下设置的接口，可以将flv视频信息保存到数据库，然后根据时间筛选可以回放视频

注：videojs-flash版本之前是2.2.0经常会发生视频无法播放的情形，升级到2.2.1就可以了