vue 仿抖音视频播放切换

Posted 2023-03-21

参考技术A 一、第一部分html页面的准备

     <van-swipe :show-indicators="false" :initial-swipe="showSlide"  @change="onChange"  vertical :loop="false" ref="vant_swipe" >

          <van-swipe-item v-for="(item, index) in videoList" :key="index" class="product_swiper">

            <div class="video_container">

              <video class="video_box" width="100%" height="100%" webkit-playsinline="true" x5-playsinline x5-video-player-type="h5"  x5-video-player-fullscreen="true" playsinline="true" preload="auto" :src="item.video_url" :playOrPause="playOrPause"  x-webkit-airplay="allow"  x5-video-orientation="portrait" @click="pauseVideo" @ended="onPlayerEnded($event)" loop="loop" :style="opacity:isopacity"></video>

              <!-- 封面 -->

              <img v-show="isVideoShow" class="play" @click="playvideo" :src="item.video_cover" :style="opacity:isopacity">

              <img  v-show="iconPlayShow" class="icon_play" @click="playvideo"  src="static/images/icon_play.png">

            </div>

            <!-- 底部作品描述 -->

            <div class="production_box">

              <div class="production_name">item.title</div>

              <div class="production_des">item.introduction</div>

            </div>

          </van-swipe-item>

        </van-swipe>

二、数据说明部分

data()

    let u = navigator.userAgent;

    return

      showSlide: 0,

      allLoaded: false, //数据是否全部加载完

      page: 1,

      isLoading: true,

      option: ,

      current: 0,

      videoList: [],

      isVideoShow: true,

      playOrPause: true,

      video: null,

      iconPlayShow: true,

      isandroid: u.indexOf("Android") > -1 || u.indexOf("Adr") > -1, // android终端

      isios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端

      tabIndex: 0,

      showshare: false,

      videoInterval: null, //检查视频是否加载好

      videoLazy: false, //视频懒加载

      isopacity: 1,

      shareVideo: null, //点击分享的时候需要暂停的视频

      dataLoaded: false

    ;

  ,

三、事件

//滑动改变播放的视频

    onChange(index)

      //如果已经播放第一个了就清除循环

      if (this.videoInterval) clearInterval(this.videoInterval);

      this.iconPlayShow = false;

      //改变的时候 暂停当前播放的视频

      let video = document.querySelectorAll("video")[this.current];

      video.pause();

      //判断案例加载到哪里了

      if (index + 1 == this.videoList.length)

        this.page++; //当视频切换到列表的最后一个的时候请求加载下一页

        this.getData(index);

      else

        this.changeload(index);

     

    ,

//播放视频

    changeload(index)

      this.playOrPause = false;

      this.current = index;

      if (this.isiOS)

        //页面中是否存在视频懒加载

        if (this.videoLazy)

          this.videoLazy = false;

          this.isopacity = 1;

        else

          this.videoLazy = true;

          this.isopacity = 0;

       

        //ios切换直接自动播放下一个

        let vid = document.querySelectorAll("video")[this.current];

        console.log("进入changeload", vid.readyState, vid.networkState);

        //检测视频是否加载好了

        if (vid.readyState == 4)

          this.isopacity = 1;

          this.videoLazy = false;

          vid.play();

          console.log(this.videoLazy, "懒加载");

        else

          this.videoInterval = setInterval(() =>

            this.myFunction(vid);

          , 300);

       

        this.playOrPause = true;

      else

        if (this.videoLazy)

          this.videoLazy = false;

          this.isopacity = 1;

       

        //安卓播放时重置显示封面。图标等

        this.isVideoShow = true;

        this.iconPlayShow = true;

     

    ,

//检查视频懒加载的图片是否加载好

    imageLoaded()

      this.iconPlayShow = true;

    ,

//视频播放

    playvideo()

      let video = document.querySelectorAll("video")[this.current];

      this.isVideoShow = false;

      this.iconPlayShow = false;

      //检测视频是否加载好了

      if (video.readyState == 4 || video.networkState == 1)

        video.play();

        this.isopacity = 1;

      else

        this.videoInterval = setInterval(() =>

          this.myFunction(video);

        , 300);

     

      window.onresize = function()

        video.style.width = window.innerWidth + "px";

        video.style.height = window.innerHeight + "px";

      ;

    ,

pauseVideo()

      clearInterval(this.videoInterval);

      //暂停\播放

      let video = document.querySelectorAll("video")[this.current];

      if (this.playOrPause)

        video.pause();

        this.iconPlayShow = true;

        this.videoLazy = false;

      else

        this.videoInterval = setInterval(() =>

          this.myFunction(video);

        , 300);

        this.iconPlayShow = false;

     

      this.playOrPause = !this.playOrPause;

    ,

onPlayerEnded(player)

      //视频结束

      this.isVideoShow = true;

      this.current += this.current;

    ,

    myFunction(video)

      let nws = video.networkState;

      if (video.readyState == 4 || nws == 1)

        video.play();

        if (video.readyState == 4)

          this.iconPlayShow = false; //暂停按钮

          this.videoLazy = false; //懒加载

          this.isopacity = 1; //视频是否显示

          this.isVideoShow = false; //封面图片

          clearInterval(this.videoInterval);

       

      else

        this.videoLazy = true;

        this.isopacity = 0;

     

   

deactivated()

    this.showSlide = this.current;

    console.log("清除循环", "退出");

    clearInterval(this.videoInterval);