vue+js实现视频淡入淡出效果

vue+js实现视频的淡入淡出，供大家参考，具体内容如下

一个简单的视频淡入淡出效果如图

小编直接上代码了有兴趣可以拷贝运行一下，谢谢

<template> <div class='video-css'> <div ref='videodom' style='background-color:black;'> <video ref='play' :src='https://www.haobala.com/bcjs/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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。