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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自学编程网。
- 本文固定链接: https://zxbcw.cn/post/219515/
- 转载请注明:必须在正文中标注并保留原文链接
- QQ群: PHP高手阵营官方总群(344148542)
- QQ群: Yii2.0开发(304864863)