video

最新推荐文章于 2023-08-17 15:10:51 发布

weixin_42777161

最新推荐文章于 2023-08-17 15:10:51 发布

阅读量19

点赞数

本文链接：https://blog.csdn.net/weixin_42777161/article/details/134506723

版权

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>

weixin_42777161

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
video

1. 切换闪烁在网上找了好多方法都不知所以然，试了很多方法都无法做到中间不闪烁无缝切换，最终自己想到了一个方案。原理是先将video标签overflow: hidden;（不能使用display:none;会被禁止预载播放），让第二个视频play()后在ca...
复制链接

扫一扫