vue 统计视频播放总时长
最新推荐文章于 2025-05-25 11:14:45 发布
原创
最新推荐文章于 2025-05-25 11:14:45 发布
·
2.3k 阅读
·
0
·
5
·
CC 4.0 BY-SA版权
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
文章标签:
#vue.js
#javascript
#elementui
Javascript
同时被 2 个专栏收录
3 篇文章
订阅专栏
vue
2 篇文章
订阅专栏
这个博客展示了如何在Vue.js应用中实现一个自定义的视频播放组件。它使用了vue-video-player库,并详细配置了播放选项,如播放速度、自动播放、静音、循环播放等。组件还包含了播放、暂停、全屏切换和播放时间更新的事件监听。样式部分定制了播放按钮的外观,并调整了布局。博客通过一个示例展示了如何响应播放状态的变化,并进行了引用类型的深拷贝演示。
摘要生成于
C知道
,由 DeepSeek-R1 满血版支持,
前往体验 >
ref="videoPlayer" :playsinline="true" :options="playerOptions" @pause="onPlayerPause($event)" @play="onPlayerPlay($event)" @ended="onPlayerEnded($event)" @timeupdate="onPlayerTimeupdate($event)" @ready="playerReadied" > Your browser does not support the video tag.
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
name: 'player',
components: {
videoPlayer
},
data() {
return {
isPlay: false,
currentTime: 0,
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
autoplay: false, // 如果为true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 是否视频一结束就重新开始。
preload: "auto", // 建议浏览器在
language: "zh-CN",
aspectRatio: "16:9", // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
sources: [
{
type: "video/mp4", // 类型
src: 'http://vjs.zencdn.net/v/oceans.mp4', // url地址
},
],
poster: '', // 封面地址
notSupportedMessage: "此视频暂无法播放,请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true, // 当前时间和持续时间的分隔符
durationDisplay: true, // 显示持续时间
remainingTimeDisplay: false, // 是否显示剩余时间功能
fullscreenToggle: true, // 是否显示全屏按钮
},
}
}
},
watch: {
isPlay(val) {
if (val) {
console.log('播放')
} else {
console.log('暂停')
}
}
},
computed: {
player() {
return this.$refs.videoPlayer.player
}
},
created() {
let arr = {
name: 'liuzhipeng',
age: 27
}
let newArr = {
name: arr.name,
age: arr.age
}
console.log('引用类型深拷贝,拷贝对象和被拷贝对象使用“===”')
if (newArr === arr) {
console.log('成立')
} else {
console.log('不成立')
}
},
methods: {
onPlayerPause($event) {
this.isPlay = false;
},
onPlayerPlay($event) {
this.isPlay = true;
},
onPlayerEnded($event) {},
onPlayerClick() {
if (this.isPlay) {
this.player.pause();
} else {
this.player.play();
}
},
/* 获取视频播放进度 */
onPlayerTimeupdate(player) {
this.currentTime = player.cache_.currentTime
console.log(' onPlayerTimeupdate!', this.currentTime)
},
/* 设置视频进度 */
playerReadied(player) {
player.currentTime(this.currentTime)
}
}
}
.main {
width: 600px;
height: 400px;
margin: 50px auto;
.playArea {
position: relative;
/deep/ #vjs_video_3 {
border-radius: 8px;
.vjs-big-play-button {
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%);
background: url("../../assets/logo.png") no-repeat;
background-size: cover;
border: none;
width: 32px;
height: 32px;
}
.vjs-poster {
border-radius: 8px;
}
}
/deep/.vjs-big-play-button .vjs-icon-placeholder:before {
display: none !important;
}
.tilt {
width: 100%;
height: 100%;
opacity: 1;
position: absolute;
top: 0;
left: 0;
z-index: 99999;
.but {
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%);
background: url("../../assets/logo.png") no-repeat;
background-size: cover;
border: none;
width: 32px;
height: 32px;
position: absolute;
}
}
}
.title {
font-size: 28px;
font-weight: bold;
text-align: center;
padding: 20px;
}
}