video-player实现hls播放全过程

• 安装依赖

npm install vue-video-player --save

•  

• 引入样式

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

•  
• 把VueVideoPlayer导入并挂在到vue上

//在main.js内
import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer);

•  

• 编写业务组件 myPlayer.vue

• <template>
    <div class="container">
      <div class="player">
        <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)">
        </video-player>
      </div>
    </div>
  </template>
  
  <script>
  import