仿抖音的下滑切换视频

H:

        <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>

D:

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
    };
  },

M:

//滑动改变播放的视频
    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);
  }
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,919评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,567评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,316评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,294评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,318评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,245评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,120评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,964评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,376评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,592评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,764评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,460评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,070评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,697评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,846评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,819评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,665评论 2 354