动图更精彩

在这里插入图片描述

背景

Vue作为大前端开发页面交互，在数字屏，智慧大屏等大屏幕开发过程中，轮播效果作为丰富的展示组件经常作为首选。但也因为这个组件的交互体验很好，于是各种单点组件增加到轮播效果里。经过业务的扩展，人员的更迭。轮播组件的节点呈现爆炸的增长，而客户使用方还觉得不满足，于是在节点暴增，节点业务丰富的情况下浏览器和webview等移动浏览器的渲染性能就更不上了，于是就有了白屏，花屏，黑屏，卡顿严重等等异常的画面现象。问题的现象和原因大家都知道，但产品方、甲方、使用方、开发方等等多方面的拉扯优化方向迟迟无法落地，因此需要用demo来验证性能的优化对比，达到可对比，可测量，可验证。

Vue页面源码如下：

<template><div class="player-box"><!-- 封面轮播 --><transition name="fade"><imgv-if="showCover":src="list[index].cover"class="cover"@click="play"/></transition><!-- 视频 --><videov-show="!showCover"controlspreload="auto"ref="videoRef"class="video":src="list[index].video"@ended="onEnded"@error="onEnded"@loadstart="onLoadStart"/></div>
</template><script>
import coverFiles from '@/assets/covers.json';
// import videoFiles from '@/assets/videos.json';export default{name: 'SwipeCoverVideoCarousel6',data(){return{covers:coverFiles,list:[{ cover: 'https://picsum.photos/640/360?random=1', video: 'https://www.w3schools.com/html/mov_bbb.mp4' },{ cover: 'https://picsum.photos/640/360?random=2', video: 'https://www.w3schools.com/html/movie.mp4' },{ cover: 'https://picsum.photos/640/360?random=3', video: 'https://www.w3schools.com/html/mov_bbb.mp4' },{ cover: 'https://picsum.photos/640/360?random=2', video: 'https://www.w3schools.com/html/movie.mp4' },],index:0,showCover:true}},mounted(){
// 首条自动播放this.$refs.videoRef.muted = true;this.$refs.videoRef.play();},methods:{
/* 3. 播放：隐藏封面 + 让视频真播放 */play() {console.log('play called!');this.$refs.videoRef.play()
},onLoadStart(){console.log('onLoadStart called!');this.showCover = false},/* 4. 视频结束：回到封面 → 3 秒后切下一张 → 如果还有就自动再播 */onEnded() {console.log('onEnded called!');this.showCover = true                // 1. 回到封面setTimeout(() => {this.index = (this.index + 1) % this.list.length   // 2. 轮播下一张console.log('轮播下一张 called!');this.$nextTick(() => this.play())// 3. 自动播放下一条视频}, 3000)
}},}</script><style scoped>
.player-box {position: relative;width: 640px;height: 360px;margin: 40px auto;overflow: hidden;
}
.cover,
.video {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;cursor: pointer;
}
/* 淡入淡出 */
.fade-enter-active,
.fade-leave-active {transition: opacity 0.4s;
}
.fade-enter-from,
.fade-leave-to {opacity: 0;
}
</style>