一、vue-video-player的使用：
1.安装
npm i vue-video-player -D
2.引入（组件内引入）
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
name: "sstc",
components: {
videoPlayer
},3.使用
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions">
</video-player> playerOptions: {
// playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
controls: false, //是否显示控制条
autoplay: false, // 如果为true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 是否视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [{
type: "application/x-mpegURL", // 类型
src: 'http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8'// url地址
}],
poster: '', // 封面地址
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
// timeDivider: true, // 当前时间和持续时间的分隔符
// durationDisplay: true, // 显示持续时间
// remainingTimeDisplay: false, // 是否显示剩余时间功能
// fullscreenToggle: true // 是否显示全屏按钮
}
}单独的vue-video-player不支持直接播放m3u8格式的视频，还需安装 videojs-contrib-hls
npm install --save videojs-contrib-hls
然后在组件内引入
import 'videojs-contrib-hls'
然后效果如下图所示：
（视频没有显示控制条，所以是写了自定义按钮控制播放暂停）
playVideo(){
this.$refs.videoPlayer.player.play();
},
pauseVideo(){
this.$refs.videoPlayer.player.pause();
}
下面是一些可以测试的m3u8格式的播放源
{ name: 'cctv1', src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8' },
{ name: 'cctv2', src: 'http://ivi.bupt.edu.cn/hls/cctv2.m3u8' },
{ name: 'CCTV3高清', src: 'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8' },
{ name: 'CCTV4高清', src: 'http://ivi.bupt.edu.cn/hls/cctv4.m3u8' },
{ name: 'CCTV5+高清', src: 'http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8' },
{ name: 'CCTV6高清', src: 'http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8' },
{ name: 'CCTV7高清', src: 'http://ivi.bupt.edu.cn/hls/cctv7.m3u8' },
{ name: 'CCTV-8高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8' },
{ name: 'CCTV-9高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv9.m3u8' },
{ name: 'CCTV-10高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv10.m3u8' },
{ name: 'CCTV-11高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv11.m3u8' },
{ name: 'CCTV-12高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv12.m3u8' },
{ name: 'CCTV-13高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv13.m3u8' },
{ name: 'CCTV-14高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv14.m3u8' },
{ name: 'CCTV-15高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv15.m3u8' },
{ name: 'CHC高清电影 ', src: 'http://ivi.bupt.edu.cn/hls/chchd.m3u8' },
{ name: '北京卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/btv1hd.m3u8' },
{ name: '北京文艺高清 ', src: 'http://ivi.bupt.edu.cn/hls/btv2hd.m3u8' },
{ name: '湖南卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/hunanhd.m3u8' },
{ name: '浙江卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/zjhd.m3u8' },
{ name: '江苏卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/jshd.m3u8' },
{ name: '东方卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/dfhd.m3u8' },
{ name: '安徽卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/ahhd.m3u8' },
{ name: '黑龙江卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/hljhd.m3u8' },
{ name: '辽宁卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/lnhd.m3u8' },
{ name: '深圳卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/szhd.m3u8' },
{ name: '广东卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/gdhd.m3u8' },
{ name: '天津卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/tjhd.m3u8' },
{ name: '湖北卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/hbhd.m3u8' },
{ name: '东南卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/sdhd.m3u8' },
{ name: '北京纪实高清 ', src: 'http://ivi.bupt.edu.cn/hls/btv11hd.m3u8' },