vue视频剪辑深入浅出,vue 轮播图淡入淡出效果
这篇文章主要为大家详细介绍了vue js实现视频的淡入淡出，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue js实现视频的淡入淡出，供大家参考，具体内容如下
一个简单的视频淡入淡出效果如图
小编直接上代码了有兴趣可以拷贝运行一下，谢谢
模板
div class=视频-css
div class= videocss ref= videodom style= background-color:black；
视频宽度= 100% ref= play style= opacity:1 :src= videos RC 2 /video
/div
div class=视频-但是
El-button type= primary @ click= play()播放/el-button
El-button type= primary @ click= pause()暂停/el-button
El-button type= primary @ click=淡入(100)淡入/el-button
El-button type= primary @ click= fade out(100)淡出/el-button
/div
/div
/模板
脚本
导出默认值{
data() {
返回{
videoSrc: require(././assets/web _ 1496003377。MP4’)，
videoSrc2: require(././资产/视频。MP4’)
}
},
方法：{
播放(){
这个refs.play.play()
},
暂停(){
这个. refs.play.pause()
},
淡入（速度){
让那个=这个
定义变量速度=速度 30;
var num=0；
var st=setInterval(function(){
数字
那个参考文献。玩吧。风格。不透明度=num/10；
if (num=10) {
间隙(ST)；
}
},速度);
},
淡出（速度){
让那个=这个
定义变量速度=速度 30;
var num=10
var st=setInterval(function(){
num-；
那个参考文献。玩吧。风格。不透明度=num/10；
if (num=0){
间隙(ST)；
}
},速度);
}
}
}
/脚本
style lang=less 范围。视频-css {。视频编码{
宽度：800像素
高度：450像素
显示器：flex
对齐-内容：居中；
}。视频-但是{
显示器：flex
边距-顶部：20px
对齐-内容：灵活开始；
对齐-内容：灵活启动；
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。