【H5 移动端播放 m3u8格式视频】应用场景：海康视频监控，rtmp 格式后台转成 m3u8 后使用

方案1：vue-video-player 

NPM :  npm install vue-video-player --save

代码如下：

import Vue from 'vue'
import App from './App.vue'


import VueVideoPlayer from 'vue-video-player'

// require videojs style
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

Vue.use(VueVideoPlayer)


Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

<template>
  <div class="item">
    <div class="player">
      <video-player
        class="vjs-custom-skin"
        :options="playerOptions"
        @ready="playerReadied"
      >
      </video-player>
    </div>
  </div>
</template>
<script>
// videojs
import videojs from "video.js";
window.videojs = videojs;
// hls plug