video标签的使用

记录工作中的问题

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

左右切换：

播放前：

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

代码

      <!-- 视频列表 --><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}&timestamp=${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)})},},
}

video标签的使用相关推荐

HTML5 Audio/Video 标签,属性,方法,事件汇总（转）
2019独角兽企业重金招聘Python工程师标准>>> <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放c ...
video标签poster属性在安卓微信中不生效问题解决
video标签poster属性在安卓微信中不生效问题解决参考文章: (1)video标签poster属性在安卓微信中不生效问题解决 (2)https://www.cnblogs.com/shicha ...
html video标签问题,用HTML5 video标签的一系列问题
H5标签的video,我想写过前台代码的人,都不会陌生吧.但video标签还是有少量问题. 一.PC端的兼容问题: H5的标签不兼容ie8包括ie8以下的浏览器:处理办法:用js的库video.js, ...
HTML5中video标签与canvas绘图的使用
原文:https://www.cnblogs.com/zhuzhenwei918/p/6822834.html video标签的使用 video标签定义视频, 它是html5中的新标签, 它的属性如下 ...
php video标签使用方法,HTML_HTML5 video标签（播放器）学习笔记（一）:使用入门，近有在学习html5中video标签（播 - phpStudy...
HTML5 video标签(播放器)学习笔记(一):使用入门近有在学习html5中video标签(播放器)的使用,这里做一些学习笔记,方便自己查阅和记录,本文是第一篇,将介绍的是使用该标签初始化该做 ...
video标签在微信浏览器打开，不弹出大的独立窗口而是直接播放。
1.在 video 标签中添加属性 x5-playsinline playsinline webkit-playsinline="true" 2.ckplayer的 ...
HTML5的Video标签的属性,方法和事件汇总
<video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...
HTML5 audio与video标签实现视频播放，音频播放
随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. audio 标签属性 <audio src="song.mp3" contr ...
vue中通过数据双向绑定给video标签的src赋值，只有第一次有效，怎么解决？
场景:在一个视频列表页面,点击视频列表,则全屏播放视频.全屏播放是一个公用组件,每次点击视频列表则把该视频的播放地址通过vue的数据双向绑定到组件中的video标签,如下: <video con ...
html5应用测试方法,详解html5的video标签测试应用
1.video标签的使用属性:src(要播放的音频文件路径).autoplay(是否自动播放).control(进度条).loop(循环播放).onended(是否播放完毕的是一个事件) 2.实现了 ...

video标签的使用

记录工作中的问题

video标签的使用相关推荐

最新文章

热门文章