video标签的使用

记录工作中的问题

需求：播放前自定义图片，添加遮罩，添加暂停按钮， 且不显示功能区。点击播放开始显示功能区。左右切换视频需要乱序重排，隐藏掉转发,  点击回到顶部等

左右切换： 

 

播放前：

开始播放：(这个暂停的时候在手机上中间位置实际是有那个三角的暂停键的, 电脑上不显示)

 

 

 代码

      <!-- 视频列表 -->
      <div class="main">
        <div
          v-for="(item, index) in tab_zy_img
            ? Arts
            : tab_zt_img
            ? special
            : tab_dsp_img
            ? sVideo
            : tab_vlg_img
            ? VLog
            : []"
          :key="item.id"
          class="box"
        >
          <p>{{ item.author }}</p>
          <div class="video_box">
            <!-- poster第一画面 controls播放按钮 autoplay="autoplay"  autoplay自动播放 preload预加载 -->
            <!-- :controls="!item.showShade" -->
            <video
              :id="item.v_id"
              width="100%"
              height="100%"
              preload="auto"
              :controls="!item.showShade"
              :poster="item.poster"
              :src="item.v_url"
              playsinline
              webkit-playsinline
              x5-playsinline
              x5-video-player-fullscreen
              x5-video-orientation="portraint"
            ></video>

            <!-- 禁止ios在点击视频时自动全屏播放
              webkit-playsinline
              x5-playsinline
              x5-video-player-fullscreen
              x5-video-orientation="portraint" -->

            <!-- 蒙层 首次进入显示 -->
            <div v-if="item.showShade" class="video_z"></div>
            <!-- 暂停图标 首次进入显示 -->
            <div
              v-if="item.showZanTing"
              class="video_img"
              @click="playVideo(item, index)"
            ></div>
            <!-- 透明层 -->
            <div
              v-if="showVideoBac"
              class="video_bac"
              @click="playVideo(item, index)"
            ></div>
          </div>
          <p>{{ item.t_name }}</p>
        </div>
      </div>
      <!-- 返回顶部 -->
      <div class="footer"><button @click="toTop"></button></div>

  methods: {

    // 数组乱序
    randomArray (arr) {
      var stack = []
      while (arr.length) {
        //Math.random()：返回 [0,1) 之间的一个随机数
        var index = parseInt(Math.random() * arr.length)  // 利用数组长度生成随机索引值
        stack.push(arr[index])  // 将随机索引对应的数组元素添加到新的数组中
        arr.splice(index, 1)  // 删除原数组中随机生成的元素
      }
      return stack
    },

    // 点击按钮返回顶部
    toTop () {
      var timer = null//时间标识符
      var isTop = true

      // 设置定时器
      timer = setInterval(function () {
        var osTop = document.documentElement.scrollTop || document.body.scrollTop
        //减小的速度
        var isSpeed = Math.floor(-osTop / 6)
        document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed
        //判断，然后清除定时器
        if (osTop == 0) {
          clearInterval(timer)
        }
        isTop = true//添加在obtn.onclick事件的timer中    
      }, 30)
      if (!isTop) {
        clearInterval(timer)
      }
      isTop = false
    },

    // 点击播放/暂停
    playVideo (item, index) {
      var video = document.getElementById(item.v_id)
      if (this.video != null && this.video != video) {
        // 上一个点过的视频未暂停直接点了下一个进行播放,此时将上一个视频暂停并添加暂停按钮
        this.video.pause()
      }
      // 记录上个点击的视频的信息
      this.video = video


      // 点击暂停/播放
      if (video.paused) {
        video.play()
      } else {
        video.pause()
      }
    },


    // 以下五步是将转发功能隐藏掉 
    // 1.获取url
    getlocalUrl () {
      // 獲取 localurl
      this.localurl = location.href.split("#")[0]
    },
    // 2.生成16位随机码
    randomString () {
      // 生成16位隨機碼
      let len = 16
      let $chars = "ABCDEFGHJKMNPQefhijkmnprstwxyz234541425"
      let maxPos = $chars.length
      let pwd = ""
      for (var i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
      }
      this.noncestr = pwd
    },
    // 3.调接口
    getticket () {
      let appId = this.GetQueryString("appId")
      // eslint-disable-next-line no-undef
      axios.get("https://pmd.cctv.cn/cctvwx/getticket?appId=" + appId)
        .then((res) => {
          console.log(res, 'res')
          this.jsapi_ticket = res.data.ticket
          // 獲取 jsapi_ticket 生成簽名
          this.getSignature()
        }).catch((err) => { console.log(err) })
    },
    // 4.生成签名
    getSignature () {
      this.timestamp = new Date().getTime()
      let newString = `jsapi_ticket=${this.jsapi_ticket}&noncestr=${this.noncestr}&timestamp=${this.timestamp}&url=${this.localurl}`
      // eslint-disable-next-line no-undef
      let SHA1 = new Hashes.SHA1()
      this.signature = SHA1.hex(newString)
      // 初始化config
      this.initWxApi()
    },
    // 5. 初始化
    initWxApi () {
      wx.config({
        beta: true, // 调用wx.invoke形式的接口值时，该值必须为true。
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: "ww0xxxxxxxxx", // 必填，企业微信的cropID
        timestamp: this.timestamp, // 必填，生成签名的时间戳
        nonceStr: this.noncestr, // 必填，生成签名的随机串
        signature: this.signature, // 必填，签名，见附录1
        jsApiList: [
          "hideWatermark",
          "showWatermark",
          "previewFile",
          "onRecordBufferReceived",
          "startRecordVoiceBuffer",
          "stopRecordVoiceBuffer",
          "hideOptionMenu",
        ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      })

      // eslint-disable-next-line no-undef
      wx.checkJsApi({
        jsApiList: [
          "hideWatermark",
          "showWatermark",
          "previewFile",
          "onRecordBufferReceived",
          "startRecordVoiceBuffer",
          "stopRecordVoiceBuffer",
        ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        success: function () {
          // console.log(res);
        },
      })

      wx.ready(function () {
        console.log('隐藏转发')
        wx.hideOptionMenu()
      })
      wx.error(function (res) {
        console.log(res)
      })
    },
  },
}