vue+js實現(xiàn)視頻的淡入淡出，供大家參考，具體內(nèi)容如下

一個簡單的視頻淡入淡出效果如圖

小編直接上代碼了有興趣可以拷貝運行一下，謝謝

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。