视频流地址格式为:https://open.ys7.com/XXXXXXXXXXXXXXXXX.m3u8?XXXXXXXXXXXXXXXXXXXXXXX格式
1.下载插件
# 安装插件 vue2不知道video-player6的版本,只能安装5
npm install vue-video-player@5 --save
# 安装hls
npm install videojs-contrib-hls --save
2.在main.js中引入
//下载插件,播放hls视频
require('video.js/dist/video-js.css');
require('vue-video-player/src/custom-theme.css');
import hls from 'videojs-contrib-hls';
import VideoPlayer from 'vue-video-player';
Vue.use(hls);
Vue.use(VideoPlayer);
3.vue代码
<template>
<div class="demo-drawer__content">
<div class="formOutDiv">
<div style="width: 100%; height: 450px">
<video-player
ref="videoPlayer"
class="vjs-custom-skin"
:options="playerOptions"
></video-player>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Device',
components: {},
data() {
return {
openInfo: false,
// 按照如下的配置+底部的css样式就能完成视频铺满DIV的效果,否则两边有黑边
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: true, //如果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: 地址地址 //你的m3u8地址(必填)
}
],
//poster: '', //你的封面地址poster.jpg
defaultQuality: 0,
width: '1000px',
height: '450px',
hls: true,
notSupportedMessage: '此视频暂无法播放,请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。
}
};
}
};
</script>
// 以下两个样式就可以完成视频,全屏铺满DIV,不然两边会有黑边
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .video-js .vjs-tech {
object-fit: fill;
}
::v-deep .vjs-poster {
background-size: cover;
}
</style>
4.遇到问题
在下载插件时控制台报错报错
npm ERR! code CERT_HAS_EXPIRED
npm ERR! errno CERT_HAS_EXPIRED
解决:
npm cache clean --force
npm config set strict-ssl false
npm install
5.缺点
用hls播放视频时,有时会播放几秒就停住等待加载
6.详细步骤参考文章
7.补充样式调整
在playerOptions内添加controlBar属性,设置底部工具栏都显示什么
这部分内容
controlBar: {
timeDivider: false,
durationDisplay: false,
remainingTimeDisplay: false,
fullscreenToggle: true, // 全屏按钮
playToggle: false,
currentTimeDisplay: false,
volumeMenuButton: false
}
如果要设置这部分不显示,在css中添加样式
::v-deep .vjs-control-bar {
display: none;
}