最近遇到点需求，领导要求能四宫格、九宫格的视频流播放器，还要能随意切换播放地址，一开始想用Vue-Video-Player解决问题的，但越用越不爽，试试别的~

Vue-Core-Video-Player

注：在多屏的时候会互相干扰（指样式，如播放和暂停的按钮样式，功能不受影响）

简单的配置过后

npm npm install --save vue-core-video-player
yarn yarn add -S vue-core-video-player

配置环境
main.js

import VueCoreVideoPlayer from 'vue-core-video-player'

Vue.use(VueCoreVideoPlayer)

直接使用

<div id="app">
  <div class="player-container">
    <vue-core-video-player src="./your_video_source.mp4"></vue-core-video-player>
  </div>
</div>

还真不赖

当然，还没配置完，播放视频的话video标签也是能做到的，接下来引入HLS

npm npm install @core-player/playcore-hls --save

<template>
  <div id="app">
    <div class="player-container">
      <vue-core-video-player :core="HLSCore" src="your_file.m3u8"></vue-core-video-player>
    </div>
  </div>
</template>
<script>
import VueCoreVideoPlayer from 'vue-core-video-player'
import HLSCore from '@core-player/playcore-hls

Vue.use(VueCoreVideoPlayer)

export default {
  name: 'App',
  data () {
    return {
      HLSCore
    }
  }
}

</script>

特别注意，这些我都是直接从官网复制来的，但是，不够细心是用不了的，踩坑记录

注意红框部分，少了个单引号有没有，真的是，坑我

附上我使用的代码

挺有意思的