H5+Jquery 仿抖音视屏切换

整体思路：

jQuery -- touch事件之滑动判断，当上划超过30px切换下一个视屏，调换<video>中的 src。

错误思路：原本想用swiper循坏<video>显示，视觉效果可以达到，但是会把所有的视屏都加载出来，虽然界面只显示一个视屏，但是能听到所有的音频。

HTML

CSS

JS

最后附上<video>标签的参数，根据需求添加

有个坑：页面有点赞功能，发现不能触发任何click事件

preventDefault)()限制了页面上的任何事件，包括click事件

最终效果

一、第一部分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)

  }

运行条件

HBuilder X 2.2.2

安装后，从插件市场导入，即可真机运行

vue

项目地址

github

uniapp插件市场

说明

插件分别用swiper实现(多端兼容)和css3动画实现(暂时只支持app)，可自行切换。

插件在uni-app编译模式下编写(已切换)。

默认为weex编译模式，在 manifest.json 的源码视图里配置是切换模式， manifest.json ->app-plus ->nvueCompiler 切换编译模式。

swiper在非App端内嵌video性能比较差，不建议导入过多视频。

项目效果

h5在线地址

---