vue+js實(shí)現(xiàn)視頻淡入淡出效果
vue+js實(shí)現(xiàn)視頻的淡入淡出,供大家參考,具體內(nèi)容如下
一個(gè)簡單的視頻淡入淡出效果如圖
小編直接上代碼了有興趣可以拷貝運(yùn)行一下,謝謝
<template> <div class='video-css'> <div ref='videodom' style='background-color:black;'> <video ref='play' :src='http://www.hdgsjgj.cn/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)。
相關(guān)文章:
1. Python基于traceback模塊獲取異常信息2. python開發(fā)一個(gè)解析protobuf文件的簡單編譯器3. ASP編碼必備的8條原則4. python 根據(jù)列表批量下載網(wǎng)易云音樂的免費(fèi)音樂5. python中round函數(shù)保留兩位小數(shù)的方法6. python 基于AioHttp 異步抓取火星圖片7. 利用python+ffmpeg合并B站視頻及格式轉(zhuǎn)換的實(shí)例代碼8. 解決Python數(shù)據(jù)可視化中文部分顯示方塊問題9. C語言字符串轉(zhuǎn)換為Python字符串的方法10. 深入理解JavaScript字節(jié)二進(jìn)制知識以及相關(guān)API
