VideoJS使用文档

VideoJs的使用

VideoJs的使用和Flv.js类似

  1. 安装 npm i video.js videojs-contrib-hls videojs-flash --save
  2. 引入
  1. 使用
 // html
<video id="my_video" ref="video"  class="video-js video_style" autoplay controls>
  <source :src="liveUrl" type="rtmp/flv">
</video>
// js 需写在mounted钩子中
this.videoPlayer = videojs(this.$refs.video, {
  controls: true,
  autoplay: true,
  preload: 'auto',
  techOrder: ['flash', 'html5']
})
this.videoPlayer.src(url)
this.videoPlayer.load() //加载
this.videoPlayer.play() //播放
this.videoPlayer.dispose() //释放

  1. 注意事项
  • 播放器视窗大小如果小于300 * 400,则无法实现自动播放
  • 同上当播放器视窗大小如果小于300 * 400时会提示‘this.el_.vjs_getProperty is not a function’
  • 关于视频的type网上说法不统一, 有‘rtmp/mp4',‘rtmp/hls’,‘rtmp/flv’亲测第三个为正确答案。
  • 在路由离开时,一定要将播放器释放,否则会占用大量浏览器资源

vue-video-player的使用

在vue项目中,有人将VideoJS以组件的形式进行封装,名为 ==vue-video-player==

配置代码

playerOptions: {
        autoplay: false, // 自动播放
        controls: true, // 是否显示控制栏
        techOrder: ['flash', 'html5'], // 兼容顺序
        sourceOrder: true, // 
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        sources: [{ // 流配置,数组形式,会根据兼容顺序自动切换
          type: 'rtmp/mp4',
          src: 'rtmp://184.72.239.149/vod/&mp4:BigBuckBunny_115k.mov'
        }, {
          withCredentials: false,
          type: 'application/x-mpegURL',
          src: 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
        }],
        poster: "/static/img/no_data.png", // 播放器默认图片
        controlBar: { // 配置控制栏
        timeDivider: false, // 时间分割线
        durationDisplay: false, // 总时间
        progressControl: true, // 进度条
        customControlSpacer: true, // 未知
        fullscreenToggle: true // 全屏
         }
      }


下面说说用这个插件来直播的一些坑和注意点吧:

首先,常用的 demo 在 vue-video-player 中官方已经给出了,按要求来就可以,其中

  1. 如果需要播放 HLS 流,需要安装 ==videojs-contrib-hls== 插件,非原生支持的浏览器,直播服务端需要开启 CORS(后面会讲到)
  2. 如果需要播放 RTMP 流,需要安装 ==videojs-flash== 插件
  3. 如果两个流都需要播放,flash 插件需要安装到 hls 插件之前

坑:

  1. 即使按照官方文档一步一步进行操作,发现还是无法正常播放rtmp视频,原因在于始终找不到==video-flash== 对应issues
  2. 在直接使用官方文档给出的demo 时,会出现‘video.js is not undefined’的提示,网上给出解决方案,说将import 引入的方式换做require,但是并没有效果。对应issues
Last Updated: 10/9/2019, 3:09:45 PM