vue视频功能整理

为什么会用vue-video-player？ 
1. 我搭建的流媒体服务的管理页面内的播放器就是用的videoJs(vue-video-player是依据videoJs封装的)，使用之后感觉良好。 
2. 百度输入“vue video”，vue-video-player就在顶部。（哈哈，就是这么随意） 
3. 当然还是看了demo页，支持的协议齐全。 
4. 虽然vue-video-player的github上还有些issues没有关闭，但是自己觉得守着videoJs强大的库与万千使用者，总能解决问题。

• 安装依赖

  npm install vue-video-player --save

   

• 引入样式  （注：引入的插件样式最好放在最上面，否则可能无法修改插件样式）

  require('video.js/dist/video-js.css')   // 这个是videoJs的样式
  require('vue-video-player/src/custom-theme.css') // 这个是vue-video-player的样式
  //因为考虑到我其他业务组件可能也会用到视频播放，所以就放在了main.js内

   

• 把VueVideoPlayer导入并挂在到vue上

  import VideoPlayer from 'vue-video-player'
  Vue.use(VideoPlayer);

   

• 编写业务组件 myPlayer.vue

  注意： 
   
  1. 根据videoJS Api修改属性。

• 地址： https://docs.videojs.com/tutorial-options.html#preload （这个找了好久找到的）

• 增加hls支持  （这个不知道怎么用，在手机上运行报错）

  npm install --save videojs-contrib-hls
  require('videojs-contrib-hls/dist/videojs-contrib-hls');