VideoJS使用文档

VideoJs的使用

VideoJs的使用和Flv.js类似

1. 安装 npm i video.js videojs-contrib-hls videojs-flash --save
2. 引入

• import videojs from 'video.js'
• import 'videojs-contrib-hls' 介绍请参照文档 (opens new window)
• import 'videojs-flash' videojs播放器的官方flash技术 (opens new window)
• window.videojs = videojs

3. 使用

 // 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() //释放

4. 注意事项

• 播放器视窗大小如果小于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 (opens new window)
2. 在直接使用官方文档给出的demo 时，会出现‘video.js is not undefined’的提示，网上给出解决方案，说将import 引入的方式换做require，但是并没有效果。对应issues (opens new window)