1. 切换闪烁
在网上找了好多方法都不知所以然,试了很多方法都无法做到中间不闪烁无缝切换,最终自己想到了一个方案。
原理是先将video标签overflow: hidden;(不能使用display:none;会被禁止预载播放),让第二个视频play()后在canplay事件里暂停自身,然后播放第一个视频,第一个视频播放结束事件ended里执行第二个视频的播放,以此做到无缝切换。
方法是不是很另类,不过倒是解决问题了,切换不会闪烁了,缺点可能就是两个视频一起缓冲了吧,不知有没有大神有更好的解决方案?
————————————————
版权声明:本文为CSDN博主「夕空」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/zhi_jie/article/details/100849915/
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta charset="UTF-8">
<title>视频交互</title>
<style type="text/css">
/*视频*/
#video_box{position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow: hidden;}
#video_box video{
display: block; margin: 0 auto; width: 100%;height: 100%; /*object-fit:fill;*/
position: absolute;left: 0;top: 0;visibility: hidden;
}
</style>
</head>
<body>
<!-- 视频播放区 -->
<div id="video_box">
<video id="vplayer_start" src="images/bg1.mp4" autoplay="false" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:fill"></video>
<video id="vplayer" src="images/bg2.mp4" autoplay="false" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:fill;"></video>
</div>
<script>
var startPlay=true;
var vplayer_start = document.getElementById('vplayer_start');
var vplayer = document.getElementById('vplayer'),
video_box = document.getElementById('video_box');
vplayer_start.pause();
vplayer.play();
// 播放结束
vplayer_start.addEventListener("ended",function(e){
vplayer.style.visibility = "visible";
vplayer.play();
e.target.style.display = "none";
});
//循环播放第二个视频
vplayer.addEventListener("ended",function(e){
e.target.play();
});
vplayer.addEventListener('canplay', function(e){
if(startPlay){
e.target.pause();
vplayer_start.style.visibility = "visible";
vplayer_start.play();
startPlay=false;
}
})
</script>
</body>
</html>
<template>
<div class="v-box">
<video
v-show="showVideo"
id="wzVideo"
x5-video-player-type="h5"
x5-video-player-fullscreen="false"
x5-playsinline
playsinline
webkit-playsinline
ref="video_1"
muted="true"
autoplay
preload="auto"
class="video"
type="video/mp4"
width="7.5rem"
>
<source src="@/assets/innovate/output.mp4" type="video/mp4" />
</video>
<video
id="wzVideo2"
x5-video-player-type="h5"
x5-video-player-fullscreen="false"
x5-playsinline
playsinline
webkit-playsinline
ref="video_1"
muted="true"
preload="auto"
class="video"
type="video/mp4"
width="7.5rem"
style="width: 100%; object-fit: fill; top: -999px"
>
<source src="@/assets/innovate/output.mp4" type="video/mp4" />
</video>
<div class="test" v-show="showCircles">
<CircleSimple1 :id="'CircleSimple'" :total_score="30" :total_full_score="100"></CircleSimple1>
<numScroll v-if="showCircles"></numScroll>
</div>
</div>
</template>
<script>
import numScroll from './numScroll.vue'
import CircleSimple1 from './CircleSimple1.vue'
export default {
components: {
CircleSimple1,
numScroll
},
data() {
return {
showVideo: false,
showCircles: false,
speed: 0 //控制圆环的速度
}
},
created() {
// 获取创新力评分
this.getData()
},
mounted() {
let ua = navigator.userAgent.toLowerCase()
let isWeixin = ua.indexOf('micromessenger') != -1
if (isWeixin) {
this.showVideo = true
document.addEventListener(
'WeixinJSBridgeReady',
function () {
wzVideo.play()
},
false
)
}
let wzVideo = document.getElementById('wzVideo')
if (!wzVideo) {
return
}
wzVideo.load()
setTimeout(() => {
this.showVideo = true
this.$nextTick(() => {
if (wzVideo.currentTime == 0) {
wzVideo.play()
}
// console.log(wzVideo, 'wzVideo')
wzVideo.addEventListener('timeupdate', (e) => {
// console.log(wzVideo.currentTime)
if (wzVideo.currentTime > 3.01) {
this.showCircles = true
}
})
})
}, 400)
},
methods: {
play(e) {
console.log(e)
},
getData() {}
}
}
</script>
<style lang="scss" scoped>
.v-box {
position: relative;
width: 750px;
height: 560px;
display: flex;
// align-items: center;
// justify-content: center;
// video {
// position: absolute;
// }
video {
background: #eef2f6;
position: absolute;
left: 0;
top: 0;
width: 7.5rem;
height: 5.6rem;
object-fit: cover;
display: block;
}
// video::-webkit-media-controls-fullscreen-button {
// display: none;
// }
.hidden {
left: 0;
top: -999px;
}
.test {
width: 450px;
height: 450px;
position: absolute;
left: 150px;
top: 48px;
display: flex;
align-items: center;
justify-content: center;
}
}
</style>