记录工作中的问题
需求：播放前自定义图片，添加遮罩，添加暂停按钮， 且不显示功能区。点击播放开始显示功能区。左右切换视频需要乱序重排，隐藏掉转发, 点击回到顶部等
左右切换：
播放前：
开始播放：(这个暂停的时候在手机上中间位置实际是有那个三角的暂停键的, 电脑上不显示)
代码
<!-- 视频列表 --><div class="main"><divv-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"playsinlinewebkit-playsinlinex5-playsinlinex5-video-player-fullscreenx5-video-orientation="portraint"></video><!-- 禁止ios在点击视频时自动全屏播放webkit-playsinlinex5-playsinlinex5-video-player-fullscreenx5-video-orientation="portraint" --><!-- 蒙层 首次进入显示 --><div v-if="item.showShade" class="video_z"></div><!-- 暂停图标 首次进入显示 --><divv-if="item.showZanTing"class="video_img"@click="playVideo(item, index)"></div><!-- 透明层 --><divv-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.获取urlgetlocalUrl () {// 獲取 localurlthis.localurl = location.href.split("#")[0]},// 2.生成16位随机码randomString () {// 生成16位隨機碼let len = 16let $chars = "ABCDEFGHJKMNPQefhijkmnprstwxyz234541425"let maxPos = $chars.lengthlet 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-undefaxios.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}×tamp=${this.timestamp}&url=${this.localurl}`// eslint-disable-next-line no-undeflet SHA1 = new Hashes.SHA1()this.signature = SHA1.hex(newString)// 初始化configthis.initWxApi()},// 5. 初始化initWxApi () {wx.config({beta: true, // 调用wx.invoke形式的接口值时，该值必须为true。debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: "ww0xxxxxxxxx", // 必填，企业微信的cropIDtimestamp: this.timestamp, // 必填，生成签名的时间戳nonceStr: this.noncestr, // 必填，生成签名的随机串signature: this.signature, // 必填，签名，见附录1jsApiList: ["hideWatermark","showWatermark","previewFile","onRecordBufferReceived","startRecordVoiceBuffer","stopRecordVoiceBuffer","hideOptionMenu",], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2})// eslint-disable-next-line no-undefwx.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)})},},
}
