最近遇到点需求，领导要求能四宫格、九宫格的视频流播放器，还要能随意切换播放地址，一开始想用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-hlsVue.use(VueCoreVideoPlayer)export default {name: 'App',data () {return {HLSCore}}
}</script>

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

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

附上我使用的代码

挺有意思的