前端vue视频vue-video-player插件总结知识点案例(带源码)
目录
-
- 文档
- 安装
- main.js文件全局引入
- 视频格式
- 组件方法
- 切换视频清晰度
- 基础案例
-
- 效果如下
- 完整案例1
-
- 效果如下
- 完整案例2
-
- 效果如下
- 最后
文档
文档地址
选项参考
API文档
配置函数方法等
Git地址
Git地址
安装
1.vue-video-player 插件下载
npm install vue-video-player --save
2.推流/m3u8 的下载
npm install --save videojs-contrib-hls
main.js文件全局引入
// 下面引入 位置 全部在node_modules文件依赖里面找到需要对应文件引入即可
import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
Vue.use(VideoPlayer)
window.videojs = VideoPlayer.videojs
// 全局引入中文提示
require('video.js/dist/lang/zh-CN.js')
//引入 hls,视频直播(m3u8)必须引入的
import 'videojs-contrib-hls'
//播放rtmp视频
import 'videojs-flash'
视频格式
type:"video/webm" // 可以播放，用ogg
type:"video/ogg" // 可以播放，用webm
type:"video/3gp" // 可以播放
type:"video/mp4" // 可以播放
type:"video/avi" // 打不开 无法播放
type:"video/flv" // 打不开 可以使用f
type:"video/mkv" // 打不开 使用video
type:"video/mov" // 打不开 使用video
type:"video/mpg" // 打不开 未测试
type:"video/swf" // 打不开 未测试
type:"video/ts" // 打不开 未测试
type:"video/wmv" // 打不开 未测试
type:"video/vob" // 没转化 未测试
type:"video/mxf" // 转化出错 未测试
type::"video/rm" // 转化出错 未测试
组件方法
this.$refs.videoPlayer这个代表拿div上面的ref组件,后面是方法
this.$refs.videoPlayer.player.pause() // 暂停视频
this.$refs.videoPlayer.player.play() // 播放视频
this.$refs.videoPlayer.player.playbackRate(2) // 改变播放速度
this.$refs.videoPlayer.player.currentTime(5) // 改变播放进度位置
this.$refs.videoPlayer.player.volume(0.1) // 音量大小值在0-1
this.$refs.videoPlayer.player.muted(true); // true 代表静音 ,f
this.playerOptions['sources'][0]['src'] = "http:url...." // 切换音视频资源路
this.$refs.videoPlayer.player.load(); // 视频加载
this.$refs.videoPlayer.player.requestFullscreen(); // 直接全屏 如果当
this.$refs.videoPlayer.player.exitFullscreen(); // 在全屏模式下，将
this.$refs.videoPlayer.player.enterFullWindow(); // 当环境不支持全屏
this.$refs.videoPlayer.player.reset(); // 重置播放器
this.$refs.videoPlayer.player.currentSources() // 返回当前播放源信
this.$refs.videoPlayer.player.preload(val); // 获取或者设置预加
this.$refs.videoPlayer.player.controls(false); // 播放控件是否显示
切换视频清晰度
//添加切换清晰度 按钮
// 监听播放
onPlayerPlay(){
this.$refs.videoPlayer.player.play() // 播放
// 播放的时候判断一下 有没有 清晰度这个按钮
// !this.$('#vjsControl')
if(!document.getElementById('vjsControl')){
this.addTool()
}
},
addTool(){
let that = this
this.$(".vjs-control-bar").append(
`<button class="vjs-control" id="vjsControl">${text}button>`)
let vjsControl = document.getElementById('vjsControl')
vjsControl.addEventListener('click',that.resourceClcik)
// document.addEventListener()
},
// 切换资源
resourceClcik(){
let text = this.$('#vjsControl').text()
if(text === '标清') {
this.$('#vjsControl').text('超清')
// this.playerOptions.sources[0].src = ''
} else if(text === '超清') {
this.$('#vjsControl').text('标清')
// this.playerOptions.sources[0].src = ''
}
}
基础案例
基础案例,可以直接复制到vue页面查看效果
是否禁止拖动进度条可以设置,在样式里面,被注释掉了,可以打开
<template>
<div class="course_node_video">
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"
@ready="playerReadied" @pause="onPlayerPause($event)" @timeupdate="onPlayerTimeupdate($event)">
video-player>
div>
template>
<script>
export default {
data () {
return {
playerOptions: {
// 可选的播放速度
playbackRates: [0.5, 1.0, 1.5, 2.0],
// 如果为true,浏览器准备好时开始回放。
autoplay: false,
// 默认情况下将会消除任何音频。
muted: false,
// 是否视频一结束就重新开始。
loop: false,
// 建议浏览器在
preload: 'auto',
// 语言设置
language: 'zh-CN',
// 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
aspectRatio: '16:9',
// 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
fluid: true,
sources: [{
// 视频类型
type: "video/mp4",
// 视频地址
src: 'https://qkodo.playlistmusic.com.cn/transcode_1080/video/2dd0dd6bb83b71d16c6313d0411d26aa.mp4'
}],
// 视频地址
poster: '',
// 允许覆盖Video.js无法播放媒体源时显示的默认信息。
notSupportedMessage: '此视频暂无法播放，请稍后再试',
//底栏控制器
controlBar: {
// 当前时间和持续时间的分隔符
timeDivider: true,
// 显示持续时间
durationDisplay: true,
// 是否显示剩余时间功能
remainingTimeDisplay: false,
// 是否显示全屏按钮
fullscreenToggle: true
}
},
currentTime: 7, // 秒数设置 单位默认s
}
},
methods: {
/* 获取视频播放进度 */
onPlayerTimeupdate (player) {
this.currentTime = player.cache_.currentTime
},
/* 设置视频开始的进度 */
playerReadied (player) {
player.currentTime(this.currentTime)
},
// 暂停回调 将视频播放的时间保存
onPlayerPause (player) {
console.log('player pause currentTime!', player.cache_.currentTime);
// let that = this;
// 存储player.currentTime 是当前暂停时间 用于下次断续播放
},
},
beforeMount () {
// let id = this.$route.query.id;
// if (id != undefined && id != null) {
// //编辑
// localStorage.setItem("videoId", id);
// // this.loadCourseNodeVideo(id);
// } else {
// id = localStorage.getItem("videoId");
// if (id != undefined && id != null) {
// // this.loadCourseNodeVideo(id);
// } else {
// localStorage.removeItem("videoId");
// }
// }
}
}
script>
<style scoped>
.course_node_video {
width: 100%;
height: auto;
margin: 0 auto;
text-align: center;
}
/* 是否设置禁止进度条被拖动样式 */
/* .course_node_video >>> .vjs-progress-control {
pointer-events: none;
} */
style>
效果如下
完整案例1
完整案例,可以直接复制到vue页面查看效果,有需要的功能自行复制到基础版里面使用
里面有视频观看起点设置
这里面style没有设置scoped注意,设置scoped里面底栏可能不生效
<template>
<div class="box">
<div class="course_node_video">
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"
@ready="playerReadied" @pause="onPlayerPause($event)" @timeupdate="onPlayerTimeupdate($event)"
customEventName="customstatechangedeventname" @play="onPlayerPlay" @ended="onPlayerEnded"
@waiting="onPlayerWaiting" @playing="onPlayerPlaying" @loadeddata="onPlayerLoadeddata"
@canplay="onPlayerCanplay" @canplaythrough="onPlayerCanplaythrough" @statechanged="playerStateChanged">
video-player>
div>
div>
template>
<script>
export default {
data () {
return {
// 视频播放器配置
playerOptions: {
// 自定义设置播放速度
playbackRates: [0.7, 1.0, 1.5, 2.0],
// 如果为true,浏览器准备好时开始回放。
autoplay: false,
// 默认情况下将会消除任何音频。
muted: false,
// 是否视频一结束就重新开始。
loop: false,
// 建议浏览器在
preload: 'auto',
// zh-CN 需要main.js全局引入才可以生效
language: 'zh-CN',
// 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
aspectRatio: '16:9',
// 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
fluid: true,
sources: [{
// 视频格式
type: "video/mp4",
// 视频地址
src: 'https://qkodo.playlistmusic.com.cn/transcode_1080/video/2dd0dd6bb83b71d16c6313d0411d26aa.mp4'
}],
// 视频封面地址
poster: '',
// 允许覆盖Video.js无法播放媒体源时显示的默认信息。
notSupportedMessage: '此视频暂无法播放，请稍后再试',
controlBar: {
// 分割线/显示隐藏
timeDivider: true,
// 显示总时间
durationDisplay: true,
// 是否显示剩余时间功能
remainingTimeDisplay: false,
// 是否显示全屏按钮
fullscreenToggle: true,
// 播放暂停按钮
playToggle: true,
// 音量控制
volumeMenuButton: false,
// 当前播放时间
currentTimeDisplay: true,
// 进度条显示隐藏
progressControl: true,
// 直播流时，显示LIVE
liveDisplay: true,
// 播放速率，当前只有html5模式下才支持设置播放速率 如果false右下角 1X 播放速率将会隐藏
playbackRateMenuButton: true,
}
},
//视频观看起点
// playtimes:"", 有请求 接口方式设置视频播放起点 步骤:111111111
// 秒数设置 单位默认s 进度条位置设置 视频观看起点设置 没有 请求接口方式设置视频播放起点 步骤:111111111
currentTime: 7,
}
},
// created () { 有请求 接口方式设置视频播放起点 步骤:2222222222
// this.fetchData();//获取的视频从何处播放的时间点
// this.playerOptions.sources[0].src = '视频地址'//视频地址
// },
methods: {
//接口获取的视频观看起点 有请求 接口方式设置视频播放起点 步骤:333333333
// fetchData (id) { //id为传的参数
// this.$http
// .get(`请求地址` + id, {
// })
// .then(res => {
// //console.log(res.data)
// this.playtimes = res.data;
// });
// },
//设置视频开始的进度 准备就绪(预加载前会调用)(初始化调用) 没有 请求接口方式设置视频播放起点 步骤:222222222
playerReadied (player) {
player.currentTime(this.currentTime)
// player.currentTime(playtimes) //有请求 接口方式设置视频播放起点 步骤:555555555
},
//获取视频播放进度 进度更新(当前播放位置发生变化时触发)(视频接收到新内容会一直调用)(高频调用)
onPlayerTimeupdate (player) {
this.currentTime = player.cache_.currentTime
// console.log(player);
},
// 暂停回调 将视频播放的时间保存 暂停回调(暂停时调用)(用户操作调用)
onPlayerPause (player) {
console.log('player pause currentTime!', player.cache_.currentTime);
// let that = this;
// 存储player.currentTime 是当前暂停时间 用于下次断续播放
},
// 播放回调(播放时会调用)(用户操作调用)
onPlayerPlay (player) {
console.log('播放', player)
this.$emit('onPlayerPlay', player)
},
// 播放状态改变回调
playerStateChanged (playerCurrentState) {
console.log('数据变化', playerCurrentState)
this.$emit('playerStateChanged', playerCurrentState)
},
//视频播完回调 (结束)(视频播放完毕调用)
onPlayerEnded (player) {
console.log('结束', player)
this.$emit('onPlayerEnded', player)
},
// 等待(视频中出现loading就会调用,加载时调用)(高频调用)
onPlayerWaiting (player) {
console.log('等待', player)
this.$emit('onPlayerWaiting', player)
},
// 播放中(进入播放状态会调用)(等待onPlayerWaiting和播放onPlayerPlay执行后会调用)(高频调用)
onPlayerPlaying (player) {
console.log('播放中', player)
this.$emit('onPlayerPlaying', player)
},
// 当播放器在当前播放位置下载数据时触发
onPlayerLoadeddata (player) {
console.log('预加载', player)
this.$emit('onPlayerLoadeddata', player)
},
// 媒体的readyState为HAVE_FUTURE_DATA或更高(预加载onPlayerLoadeddata调用后会调用)(初始化调用)
onPlayerCanplay (player) {
console.log('是否播放', player)
this.$emit('onPlayerCanplay', player)
},
// 能够从头到尾播放(是否播放onPlayerCanplay调用后会调用)(初始化调用)这意味着可以在不缓冲的情况下播放整个媒体文件
onPlayerCanplaythrough (player) {
console.log('能够从头到尾播放', player)
this.$emit('onPlayerCanplaythrough', player)
}
},
// watch: { //有 请求接口方式设置视频播放起点 步骤:44444444444
// playtimes (val, oldVal) {//普通的watch监听
// console.log("playtimes: " + val);
// this.playerReadied(this.$refs.videoPlayer.player, val);
// },
// }
// beforeMount () {
// let id = this.$route.query.id;
// if (id != undefined && id != null) {
// //编辑
// localStorage.setItem("videoId", id);
// // this.loadCourseNodeVideo(id);
// } else {
// id = localStorage.getItem("videoId");
// if (id != undefined && id != null) {
// // this.loadCourseNodeVideo(id);
// } else {
// localStorage.removeItem("videoId");
// }
// }
// },
}
script>
<style>
/* 盒子大小设置,视频在盒子内铺满且自适应 */
/* .box {
width: 50%;
margin: 100px auto;
} */
/* 重置样式也需要全局挂载 */
* {
margin: 0;
padding: 0;
}
.course_node_video {
width: 100%;
height: auto;
margin: 0 auto;
text-align: center;
}
/* 是否禁止拖动进度条 >>> 深度选择器 */
/* .course_node_video >>> .vjs-progress-control {
pointer-events: none;
} */
/* 这里深度选择器这种生效,需要去掉style标签里面的scoped才可以生效使用,才可以铺满屏幕 完整案例,可以直接复制到vue页面查看效果,有需要的功能自行复制到基础版里面使用*/
::v-deep video {
width: 100% !important;
/* 我的容器高度设置的是100vh-95px，你们根据你们容器高度设置视频高度即可 */
height: calc(100vh - 95px) !important;
/* 消除两边留白 */
object-fit: fill;
}
/* 播放器底栏控制 下面自定义按钮样式 如果不需要可以注释掉 就自动变为初始播放样式 */
.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
content: '播放视频';
font-size: 18px;
line-height: 3.5;
letter-spacing: 2px;
text-align: center;
overflow: hidden;
border: 0;
}
.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before,
.vjs-icon-fullscreen-enter:before {
content: '全屏';
font-size: 15px;
line-height: 2.8;
}
.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before,
.vjs-icon-fullscreen-exit:before {
content: '退出';
font-size: 15px;
line-height: 2.8;
}
.video-js .vjs-play-control .vjs-icon-placeholder:before {
content: '播放';
font-size: 15px;
line-height: 2.8;
}
.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before {
content: '暂停';
font-size: 15px;
line-height: 2.8;
}
.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before {
content: '重播';
font-size: 15px;
line-height: 2.8;
}
style>
效果如下
完整案例2
这个案例加了几个按钮,通过自定义按钮,实现这几个功能,源码如下
<template>
<div class="box">
<div class="course_node_video">
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"
@ready="playerReadied" @pause="onPlayerPause($event)" @timeupdate="onPlayerTimeupdate($event)"
customEventName="customstatechangedeventname" @play="onPlayerPlay" @ended="onPlayerEnded"
@waiting="onPlayerWaiting" @playing="onPlayerPlaying" @loadeddata="onPlayerLoadeddata"
@canplay="onPlayerCanplay" @canplaythrough="onPlayerCanplaythrough" @statechanged="playerStateChanged">
video-player>
<div class="footer">
<div class="list" @click="videoPlay">播放div>
<div class="list" @click="videoPause">停止div>
<div class="list" @click="videoPosition">播放位置div>
<div class="list" @click="videoDoubleSpeed">倍速div>
<div class="list" @click="videoMute">静音div>
div>
div>
div>
template>
<script>
export default {
data () {
return {
playerOptions: {
playbackRates: [0, 0.5, 1.0, 1.5, 2.0], // 可选的播放速度
autoplay: false, // 如果为true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 是否视频一结束就重新开始。
preload: 'auto', // 建议浏览器在
language: 'zh-CN', // zh-CN 需要main.js全局引入才可以生效
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [{
type: "video/mp4", // 类型
src: 'https://qkodo.playlistmusic.com.cn/transcode_1080/video/2dd0dd6bb83b71d16c6313d0411d26aa.mp4' // url地址https://qkodo.playlistmusic.com.cn/transcode_1080/video/2dd0dd6bb83b71d16c6313d0411d26aa.mp4
}],
poster: '', // 封面地址
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
// 当前时间和持续时间的分隔符
timeDivider: true,
// 显示持续时间
durationDisplay: true,
// 是否显示剩余时间功能
remainingTimeDisplay: false,
// 是否显示全屏按钮
fullscreenToggle: true,
//播放暂停按钮
playToggle: true,
//音量控制
volumeMenuButton: false,
//当前播放时间
currentTimeDisplay: true,
//点播流时，播放进度条，seek控制
progressControl: true,
//直播流时，显示LIVE
liveDisplay: true,
//播放速率，当前只有html5模式下才支持设置播放速率
playbackRateMenuButton: true,
}
},
// currentTime: 7, // 秒数设置 单位默认s 进度条位置设置 , 进入页面直接开始位置一一一一一一
playtimes: 7, // 通过点击videoPosition事件改变视频位置二二二二二
}
},
methods: {
// 视频播放
videoPlay () {
// this.player.play();
// this.playerOptions.controlBar.playToggle = false;
this.$refs.videoPlayer.player.play();
},
// 视频暂停
videoPause () {
this.$refs.videoPlayer.player.pause();
},
// 视频位置
videoPosition () { // 通过点击videoPosition事件改变视频位置二二二二二
this.$refs.videoPlayer.player.currentTime(this.playtimes)
},
// 视频倍速
videoDoubleSpeed () {
//https://www.zhangxinxu.com/study/201807/video-playbackrate.html
// https://blog.csdn.net/qq_35153373/article/details/112183508
this.$refs.videoPlayer.player.playbackRate(2) // 这个能设置固定倍速
// var button = document.getElementsByTagName('vjs-playback-rate')
// button.addEventListener('change', function () {
// this.$refs.videoPlayer.player.playbackRate = this.playerOptions.playbackRates;
// });
// this.$refs.videoPlayer.player.ready(function () {
// const num = Math.round(Math.random()*5+5);
// // 定义一个随机常数倍数
// var _this = this
// //速率
// setTimeout(function () {
// // _this.playbackRate(parseFloat(10));// 能设定固定值
// _this.playbackRate(parseFloat(num)); // 随机的
// }, 20);
// });
},
// 视频静音
videoMute () {
this.$refs.videoPlayer.player.muted(true);
},
//获取视频播放进度 进度更新(当前播放位置发生变化时触发)(视频接收到新内容会一直调用)(高频调用)
onPlayerTimeupdate (player) {
// this.currentTime = player.cache_.currentTime 进度条位置设置 , 进入页面直接开始位置一一一一一一
console.log(player);
},
/* 设置视频开始的进度 准备就绪(预加载前会调用)(初始化调用) */
playerReadied (player) {
player.currentTime(this.currentTime)
},
// 暂停回调 将视频播放的时间保存 暂停回调(暂停时调用)(用户操作调用)
onPlayerPause (player) {
console.log('player pause currentTime!', player.cache_.currentTime);
// let that = this;
// 存储player.currentTime 是当前暂停时间 用于下次断续播放
},
// 播放回调(播放时会调用)(用户操作调用)
onPlayerPlay (player) {
console.log('播放', player)
this.$emit('onPlayerPlay', player)
},
// 播放状态改变回调
playerStateChanged (playerCurrentState) {
console.log('数据变化', playerCurrentState)
this.$emit('playerStateChanged', playerCurrentState)
},
//视频播完回调 (结束)(视频播放完毕调用)
onPlayerEnded (player) {
console.log('结束', player)
this.$emit('onPlayerEnded', player)
},
// 等待(视频中出现loading就会调用,加载时调用)(高频调用)
onPlayerWaiting (player) {
console.log('等待', player)
this.$emit('onPlayerWaiting', player)
},
// 播放中(进入播放状态会调用)(等待onPlayerWaiting和播放onPlayerPlay执行后会调用)(高频调用)
onPlayerPlaying (player) {
console.log('播放中', player)
this.$emit('onPlayerPlaying', player)
},
// 当播放器在当前播放位置下载数据时触发
onPlayerLoadeddata (player) {
console.log('预加载', player)
this.$emit('onPlayerLoadeddata', player)
},
// 媒体的readyState为HAVE_FUTURE_DATA或更高(预加载onPlayerLoadeddata调用后会调用)(初始化调用)
onPlayerCanplay (player) {
console.log('是否播放', player)
this.$emit('onPlayerCanplay', player)
},
// 能够从头到尾播放(是否播放onPlayerCanplay调用后会调用)(初始化调用)这意味着可以在不缓冲的情况下播放整个媒体文件
onPlayerCanplaythrough (player) {
console.log('能够从头到尾播放', player)
this.$emit('onPlayerCanplaythrough', player)
}
},
beforeMount () {
// let id = this.$route.query.id;
// if (id != undefined && id != null) {
// //编辑
// localStorage.setItem("videoId", id);
// // this.loadCourseNodeVideo(id);
// } else {
// id = localStorage.getItem("videoId");
// if (id != undefined && id != null) {
// // this.loadCourseNodeVideo(id);
// } else {
// localStorage.removeItem("videoId");
// }
// }
}
}
script>
<style>
.box {
width: 50%;
margin: 100px auto;
}
/* 重置样式也需要全局挂载 */
* {
margin: 0;
padding: 0;
}
.course_node_video {
width: 100%;
height: auto;
margin: 0 auto;
text-align: center;
/* object-fit:fill; */
}
/* 是否禁止拖动进度条 */
/* .course_node_video >>> .vjs-progress-control {
pointer-events: none;
} */
/* 这里深度选择器这种生效,需要去掉style标签里面的scoped才可以生效使用,才可以铺满屏幕 */
::v-deep video {
width: 100% !important;
/* 我的容器高度设置的是100vh-95px，你们根据你们容器高度设置视频高度即可 */
height: calc(100vh - 95px) !important;
/* 消除两边留白 */
object-fit: fill;
}
.footer {
width: 100%;
height: 50px;
/* border: 1px solid red; */
/* background-color: rgb(67,77,71); */
flex-direction: row;
display: flex;
justify-content: space-between;
}
.footer .list {
width: 15%;
height: 100%;
/* background-color: rgba(255, 255, 255, 0.1); */
background-color: rgb(67, 77, 71);
border: 1px solid rgb(224, 208, 208);
color: #fff;
line-height: 2.8;
}
style>
效果如下
最后
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！