vue+elementUI走马灯组件+html <video>实现轮播视频,并自定义视频播放按钮完整demo
效果:代码:html部分:<el-carousel:interval="5000"arrow="always":autoplay="autoplay":indicator-position="autoplay?'':'none'"@change="getIndex"><el-carousel-item v-for=".
·
效果:
代码:
<template>
<div class="show-imgs-container" @mouseover="isIn = true" @mouseout="isIn = false">
<el-carousel :interval="cutTime" arrow="always" :autoplay="autoplay" trigger="click" :indicator-position="autoplay?'':'none'" @change="getIndex">
<el-carousel-item v-for="(item,index) in videos" :key="index">
<!--视频播放器 -->
<video :ref="'videoPlayer' + index" :controls="isIn">
<source :src="item.src" type="video/mp4">
您的浏览器不支持Video标签。
</video>
<i v-show="!isPlay" class="play-btn el-icon-video-play" @click="playVideo"></i>
<i v-show="isPlay && isIn" class="play-btn el-icon-video-pause" @click="pauseVideo"></i>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
props: {
title: {//模块标题
type: String,
default: ""
}
},
data () {
return {
autoplay: true,//是否自动切换
isPlay: false,//播放状态
isIn: false,//鼠标是否位于播放器内
cutTime: 5000,//轮播时间,单位毫秒
nowIndex: 0,
videos: [
{
src: "https://www.runoob.com/try/demo_source/mov_bbb.mp4"
},
{
src: "https://www.runoob.com/try/demo_source/mov_bbb.mp4"
},
{
src: "https://www.runoob.com/try/demo_source/mov_bbb.mp4"
},
]
}
},
mounted () {
//初始监听第一个视频
this.listenVideo();
},
methods: {
//获取走马灯的索引
getIndex (nowIndex, oldIndex) {
//用户可能在上个视频未播放完毕就切换
//此时需要暂停上个视频并把时间归零,否则影响对当前视频的监听逻辑
let myVideo = this.$refs['videoPlayer' + oldIndex];
myVideo[0].pause();
myVideo[0].currentTime = 0;
this.nowIndex = nowIndex;
this.listenVideo();
},
//监听视频的播放、暂停、播放完毕等事件
listenVideo () {
//注意:这样获取的dom是一个数组,必须加上[0]索引才能正确的添加事件
let myVideo = this.$refs['videoPlayer' + this.nowIndex];
//监听播放
myVideo[0].addEventListener("play", () => {
this.autoplay = false;
this.isPlay = true;
});
//监听暂停
myVideo[0].addEventListener("pause", () => {
this.autoplay = true;
this.isPlay = false;
});
//监听播放完毕
myVideo[0].addEventListener("ended", () => {
//时间归零
myVideo[0].currentTime = 0;
this.autoplay = true;
this.isPlay = false;
});
},
//播放视频
playVideo () {
//注意:这样获取的dom是一个数组,必须加上[0]索引才能正确的添加事件
let myVideo = this.$refs['videoPlayer' + this.nowIndex];
myVideo[0].play();
},
//暂停视频
pauseVideo () {
//注意:这样获取的dom是一个数组,必须加上[0]索引才能正确的添加事件
let myVideo = this.$refs['videoPlayer' + this.nowIndex];
myVideo[0].pause();
},
},
}
</script>
<style lang="scss">
.show-imgs-container {
height: 100%;
.el-carousel {
width: 100%;
height: 100%;
}
.el-carousel__container {
width: 100%;
height: 100%;
}
.el-carousel__item {
width: 100%;
height: 100%;
border-radius: 10px;
video {
width: 100%;
height: 100%;
position: fixed;
display: inline-block;
vertical-align: baseline;
object-fit: fill; //消除留白
}
.play-btn {
font-size: 60px;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&:hover {
cursor: pointer;
}
}
}
}
</style>
css部分:注意,video层级很高,设置position:fixed,自定义的播放按钮才能覆盖在上
更多推荐
已为社区贡献7条内容
所有评论(0)