vue+js实现视频淡入淡出效果
程序员文章站
2022-07-05 22:18:24
vue+js实现视频的淡入淡出，供大家参考，具体内容如下一个简单的视频淡入淡出效果如图小编直接上代码了有兴趣可以拷贝运行一下，谢谢
vue+js实现视频的淡入淡出，供大家参考，具体内容如下
一个简单的视频淡入淡出效果如图
小编直接上代码了有兴趣可以拷贝运行一下，谢谢
<template>
<div class="video-css">
<div class="videocss" ref="videodom" style="background-color:black;">
<video width="100%" ref="play" style="opacity: 1" :src="videosrc2"></video>
</div>
<div class="video-but">
<el-button type="primary" @click="play()">播放</el-button>
<el-button type="primary" @click="pause()">暂停</el-button>
<el-button type="primary" @click="fadein(100)">淡入</el-button>
<el-button type="primary" @click="fadeout(100)">淡出</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
videosrc: require('../../assets/web_1496003377.mp4'),
videosrc2: require('../../assets/video.mp4')
}
},
methods: {
play() {
this.$refs.play.play()
},
pause() {
this.$refs.play.pause()
},
fadein(speed) {
let that = this
var speed = speed || 30 ;
var num = 0;
var st = setinterval(function(){
num++;
that.$refs.play.style.opacity = num/10;
if (num>=10) {
clearinterval(st);
}
}, speed);
},
fadeout(speed) {
let that = this
var speed = speed || 30 ;
var num = 10;
var st = setinterval(function(){
num--;
that.$refs.play.style.opacity = num / 10 ;
if (num<=0){
clearinterval(st);
}
}, speed);
}
}
}
</script>
<style lang="less" scoped>
.video-css {
.videocss {
width: 800px;
height: 450px;
display: flex;
justify-content: center;
}
.video-but {
display: flex;
margin-top: 20px;
justify-content: flex-start;
align-content: flex-start;
}
}
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。