vue-video-player 是基于 video.js 二次封装而成，各种 api 基本互通，只是调用方式有些许区别
插件安装及引入
yarn add vue-video-player 或 npm install vue-video-player 复制代码
如引入样式时报错，请自行查看 node_modules 中对应的目录
全部引入
// main.js 中 import VideoPlayer from 'vue-video-player' // 引入默认样式包 import 'video.js/dist/video-js.css' import 'vue-video-player/src/custom-theme.css' Vue.use(VideoPlayer)
局部引入
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
export default {
name: 'Video,
components: {
videoPlayer
},
data(){
return {
playerOptions: {
// videojs options
width: '100%',
// 高度按 16:9 比例
height: (window.screen.width * 9) / 16,
// autoplay: 'muted',
autoplay: false,
},
}
}
使用
以下列出的各种回调及 api 的调用，基本可以满足自定义播放器样式了
<!-- vue template 中 --> <video-player class="video-player ref="videoPlayer" :playsinline="true" :options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)" @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)" @loadeddata="onPlayerLoadeddata($event)" @timeupdate="onPlayerTimeupdate($event)" @statechanged="playerStateChanged($event)" @ready="playerReadied"></video-player>
// vue script 中
data () {
return {
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: false, // 加载完成后是否自动播放
muted: false, // 是否静音。
loop: false, // 是否循环播放
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto 浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 宽高比例
fluid: true, // 当 true 时，Video.js player 将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [{
type: '', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看 git 网址项目
src: require('../assets/vido/vido3.mp4') // url 地址
}],
poster: '', // 你的封面地址
notSupportedMessage: '无法播放', // 允许覆盖 Video.js 无法播放媒体源时显示的默认信息。
controlBar: false // 为 false 时不显示默认的控制按钮
}
}
},
methods: {
/**
* 初始化视频
**/
initVideo: function () {
player = app.$refs.videoPlayer.player;
// 配置横屏插件
player.landscapeFullscreen({
fullscreen: {
enterOnRotate: true, //在横向旋转设备时进入全屏模式
alwaysInLandscapeMode: true, //即使设备处于纵向模式，也始终以横向模式进入全屏（适用于 chromium、firefox 和 ie>=11）
iOS: true // 是否在 iOS 上使用假全屏（显示播放器控件而不是系统控件所需）
}
});
}
// -----------------------各种回调--------------------------
// 播放的回调
onPlayerPlay (e) {
},
// 暂停的回调
onPlayerPause (e) {
},
// 结束的回调
onPlayerEnded (e) {
},
// 等待的回调
onPlayerWaiting (e) {
},
// 播放中回调
onPlayerPlaying (e) {
},
// 视频加载完成的回调
onPlayerLoadeddata (e) {
// e.duration() 可获取视频的总时长
},
// 视频播放时，时间的回调
onPlayerTimeupdate (e) {
this.currentVolume = (e.volume() * 100).toFixed(2) * 1
},
// 视频播放时状态回调
playerStateChanged (e) {
// e.timeupdate 存在时视频正在播放中，e.timeupdate 值为当前播放时间
// e.pause 存在时视频为暂停状态
// e.play 存在时视频为播放状态
},
// 视频加载完成回调，此时可以赋值 myPlayer
playerReadied (e) {
this.myPlayer = e
},
// -----------------------自定义的各种方法--------------------------
// 静音或取消静音按钮
mutedChange () {
if (this.myPlayer) {
if (this.myPlayer.muted()) {
this.myPlayer.muted(false)
} else {
this.myPlayer.muted(true)
}
this.isMuted = this.myPlayer.muted()
}
},
// 播放按钮
doPlay () {
this.myPlayer.play()
},
// 暂停按钮
doPause () {
this.myPlayer.pause()
},
// 重置视频按钮
doRest () {
this.myPlayer.src(require(`src`))
},
// 控制进度条按钮，入参单位为秒
doProgress (val) {
this.myPlayer.currentTime(val)
this.doPlay()
},
// 全屏按钮
fullScreenHandle () {
if (!this.myPlayer.isFullscreen()) {
this.myPlayer.requestFullscreen()
this.myPlayer.isFullscreen(true)
} else {
this.myPlayer.exitFullscreen()
this.myPlayer.isFullscreen(false)
}
},
// 控制音量按钮，取值 0-1
doVol (val) {
this.myPlayer.volume(val)
}
}
1：消除视频两边留白，也就是实现视频铺满父元素
通过添加样式 object-fit:fill;来实现视频铺满,视频左右两边是没有黑边了的
video{
width: 100% !important;
height: calc(100vh - 95px) !important;
object-fit:fill; //消除留白
}
补充 object-fit 取值的相关知识：
fill:此值为 boject-fit 的默认值，替换内容的大小被设置为填充元素的内容框，也就是说，元素的内容扩大到完全填充容器的外形尺寸，即使这打破其内在的宽高比。
contain：替换元素内容大小保持长宽比例填充元素内容容器，其具体对象大小被解析为一个包含元素的宽度和高度。也就是说，如果你在替换元素上设置一个明确的高度和宽度，此值将导致内容大小，完全在固定的比例显示，但仍在元素尺寸内显示。
cover：替换元素内容大小保持长宽比例填充元素内容容器，其具体对象大小被解析为覆盖整个元素的宽度和高度。也就是说，替换元素内容大小保持长宽比，但改变宽度和高度，以便完全覆盖内容元素。
none：替换元素内容不调整大小以适应内部元素的容器，内容完全忽略设置在元素上的任何高度和权重，并且仍在元素尺寸内显示。 scale-down：当内容大小设置了 none 或 contain，将导致具体对象变得更小。
2：实现自适应高宽
通过上面设置的 fluid：true 虽然可以自适应宽高，但有时候需求是规定视频总高度的，如果只是靠 fluid 来自适应是远远不够的。
我遇到的问题：
设置 video 视频高宽 100%后，总高度却超出了那个位置的高度，试了很多方法都不行，后来就才去了简单粗暴的方法去解决–修改 css 样式。（看具体场景使用）
注意：这里我是去掉了之前在 videoPlayerOptions 中设置的 fluid：true 和 aspectRatio: ’16:10’再改 css 样式的
html 代码：
<div class="my_video">
<video-player class="video-player vjs-custom-skin"
id="videoDiv"
ref="videoPlayer"
:playsinline="true"
:webkit-playsinline="true"
:options="videoPlayerOptions"
></video-player>
</div>
自定义 css 样式：
@media screen and(min-width:768px){ //pc 端视频铺满且占据整个容器的高宽，而移动端不需要视频占据整个高度，因为会拉长视频，很难看
video{
width: 100% !important;
height: calc(100vh - 95px) !important; //我的容器高度设置的是 100vh-95px，你们根据你们容器高度设置视频高度即可
object-fit:fill; //消除两边留白
}
}
//为了填满整个 my_video 的高度，设置 video 外层 div 高度（就是移动端效果图包含黑色部分和视频部分的整个 div），使之为容器高度
#videoDiv>div{
height: calc(100vh - 95px) !important;
overflow: hidden;
}
.my_video{ //这是我放视频播放器的容器
width: 100%;
height: calc(100vh - 95px);
background-color: white;
}
补充知识：vue 中使用 vue-video-player 的几个问题
video.js 插件在 vue 中是 vue-video-player;
我们在 vue 中播放视频可以使用这个插件；
下面简单描述几个使用中的问题，不涉及其他问题：
1、自定义播放处理 ， 我们自己如何去触发播放这个事件
2、播放，停止触发的函数相关处理；
3、在安卓的微信中播放视频不能播放的问题；
1、自定义播放，假设现在自己写了一个 button, 或者其他什么东西放在视频上方，要求点击这个玩意儿播放视频，
你也可以理解为播放按钮； 那么首先肯定得绑定事件，vue 绑定事件就不说了，应该都会，那么在这个绑定的
事件函数中，我们如何去播放视频呢？：this.$refs.videoPlayer.player.play(); 就可以了
2、播放或者停止播放时，我想怎加一些额外的处理，那么可以在 <video-player @play=… @pause…>
如下代码，在相应的函数中处理即可，还有其它的事件也都类似处理；
3、在<video-player :playsinline =….> 设置 playsinline 参数的时候，如果我们设置为 true 或者 false 是会出问题的，
所以需要根据情况进行处理，这里的情况一般是微信浏览器的 x5 内核，需要设置为 false, 其它的设置为 true 即可；
如果微信的 x5 设置为 true , 那么在安卓中微信环境下是无法播放的，是有问题的；
下面的代码是部分代码，仅供参考设置：
<template>
<div class="video">
<video-player class="video-player-box"
ref="videoPlayer"
:options="playerOptions"
:playsinline="playsinline"
customEventName="customstatechangedeventname"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
>
</video-player>
</div>
</template>
<script>
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
export default {
name: 'Video',
props: {
videoUrl: Object
},
data() {
return{
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0],
autoplay: false,
muted: false,
loop: false,
preload: 'auto',
language: 'zh-CN',
aspectRatio: '16:9',
fluid: true,
sources: [{
type: "video/mp4",
src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
}],
poster: "http://localhost/547be638615da10.png",
width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放，请稍后再试',
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
}
},
videoButton: require("../video_player.png"),
}
},
components: {
videoPlayer
},
mounted() {
this.playerOptions.sources[0].src = this.videoUrl.a;
this.playerOptions.poster = this.videoUrl.b
},
computed: {
player() {
return this.$refs.videoPlayer.player
}，
playsinline(){
var ua = navigator.userAgent.toLocaleLowerCase();
if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
return false
}else{
return true
}
}
},
methods: {
clickStartButton: function(){
this.$refs.videoPlayer.player.play();
},
onPlayerPlay(player) {
this.videoPlayState = true;
}
}
}
</script>
以上就是 vue video 和 vue-video-player 实现视频铺满教程，希望能帮助大家使用 vue-video-player。感谢您的认真阅读，篇幅有点长
