微信小程序开发video遮罩功能（禁止拖动进度条）

煜东發表於 2022-4-2 11:29:00

微信小程序开发video遮罩功能（禁止拖动进度条）

<h3>痛点</h3>
　　在微信小程序的标签中，<video> 标签的默认层级相当高，很多自定义标签即使设定了 z-index，也无法覆盖在 <video> 标签上，特别是在视频进入全屏状态下时。
　　有些时候我们需要在视频上显示一些自定义内容，或者禁止用户拖动进度条（小程序开发中 <video> 标签只有禁止手势拖动的属性设置，没有直接禁止进度条拖动的属性设置），就需要能有遮罩盖在 <video> 标签上方。
　　网上有方法说给<video>标签加上属性 x5-video-player-type="h5-page" ，注意 x5-playsinline webkit-playsinline playsinline x-webkit-airplay="true" 都不要乱加，但是亲测发现并没有什么效果。
<h3><cover-view> 标签</h3>
微信开发者文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
 　　微信小程序开发团队提供了 <cover-view>标签，可实现覆盖在原生组件之上的文本视图。用于解决上述问题。可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher，只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
1、使用场景：在 web-view &　原生组件上做一些简单的操作　 2、cover-view 标签有误时，并不报错 3、cover-view 不支持组件开发(只支持嵌套 cover-view、cover-image、button) 4、cover-view 的显示隐藏用 v-if(v-show: 无法实现显示隐藏的切换) 5、cover-view 覆盖在 web-view 上使用时，安卓微信7.0.9版本后，无法通过setData更新{undefined{xx}}值 6、文本必须都套上 cover-view 标签，避免排版错误
 
注意事项1
<ul>
<li>App 端 vue 页面 <code>cover-view</code>、<code>cover-image</code> 中不支持嵌套其它组件，包括再次嵌套 <code>cover-view</code>，仅可覆盖 <code>video</code>、<code>map</code>。App 端 nvue 页面自 2.1.5 起没有这些限制。</li>
<li>App 端 <code>cover-image</code> 使用本地图像的话，打包前需要设置资源为释放模式，在 manifest 文件内 app-plus 新增 runmode 节点，设置值为 liberate。</li>
<li>App 端还可以使用 plus.nativeObj.view 绘制原生内容，参考:uni-app中使用5+界面控件 (opens new window)、plus.nativeObj.view规范(opens new window)</li>
<li>App 端还提供了更灵活和强大的 <code>subNvue</code>，参考 原生子窗体subNvue</li>
<li>在 video 组件中使用时，若想在全屏模式下使用 <code>cover-view</code>，只有在微信小程序、App 端的 nvue 页面可实现。</li>
<li>在App 端，如果重度使用 video 和 map，推荐使用 nvue 页面。</li>
<li>百度小程序 iOS 端暂不支持一个页面有多个 video 时嵌套 cover-view。</li>
<li>支付宝小程序中 <code>cover-view</code> 不支持嵌套。</li>

</ul>
注意事项2
<ul>
<li>cover-view 和 cover-image 的 aria-role 仅可设置为 button，读屏模式下才可以点击，并朗读出“按钮”；为空时可以聚焦，但不可点击</li>
<li>基础库 2.2.4 起支持 touch 相关事件，也可使用 hover-class 设置点击态</li>
<li>基础库 2.1.0 起支持设置 scale rotate 的 css 样式，包括 transition 动画</li>
<li>基础库 1.9.90 起 cover-view 支持 overflow: scroll，但不支持动态更新 overflow</li>
<li>基础库 1.9.90 起最外层 cover-view 支持 position: fixed</li>
<li>基础库 1.9.0 起支持插在 view 等标签下。在此之前只可嵌套在原生组件 map、video、canvas、camera内，避免嵌套在其他组件内。</li>
<li>基础库 1.6.0 起支持 css transition动画，transition-property 只支持 transform (translateX, translateY) 与 opacity。</li>
<li>基础库 1.6.0 起支持 css opacity。</li>
<li>事件模型遵循冒泡模型，但不会冒泡到原生组件。</li>
<li>文本建议都套上 cover-view 标签，避免排版错误。</li>
<li>只支持基本的定位、布局、文本样式。不支持设置单边的 border、background-image、shadow、overflow: visible等。</li>
<li>建议子节点不要溢出父节点</li>
<li>支持使用 z-index 控制层级</li>
<li>默认设置的样式有：white-space: nowrap; line-height: 1.2; display: block;</li>
<li>自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示</li>

</ul>
 
不支持的 CSS
<ul>
<li>position: fixed</li>
<li>opacity</li>
<li>overflow</li>
<li>padding</li>
<li>linebreak</li>
<li>white-space</li>

</ul>
注意：nvue的cover-view不在上述限制中，它仅支持且全部支持nvue的所有css。
 
示例代码
<div class="cnblogs_code">
<pre><template>
<view class="page">
 <video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="true" src="https://xxx.mp4">
 <cover-view class="controls-title">简单的自定义 controls</cover-view>
 <cover-image class="controls-play img" @click="play" src="/static/play.png"></cover-image>
 <cover-image class="controls-pause img" @click="pause" src="/static/pause.png"></cover-image>
 </video>
</view>
</template></pre>
</div>
 
<h3>禁止拖动进度条</h3>
　　在小程序开发时，会遇到这样的需求：用户只能老老实实看视频，不能拖动进度条。在微信开发者文档中，<video> 标签的 enable-progress-gesture 属性为 false 时，可禁止控制进度的手势，但是并未提供直接禁止拖动进度条的属性，若将 controls 属性设为 false，则是直接不显示播放/暂停按钮、播放进度、时间，虽然实现了禁止拖动的功能，但用户体验很不友好。
实现思路
　　设置一个遮罩，覆盖在进度条的位置。在通常情况下，定义一个 <view>，蒋 z-index 设置为 999 是可以盖在 <video> 标签上的，但是当视频全屏播放时就失效了，因为全屏播放的视频显示层级相当高。这时就需要  <cover-view> 标签。
　　 <cover-view>标签写在 <video> 标签内，设置固定的位置以及长宽即可。全屏时会随着视频旋转一起旋转，设置长宽最好用百分比的形式，这样全屏时会随着视频大小一起变化，完美解决。
代码示例
<div class="cnblogs_code">
<pre><template lang="pug">
<view class="section">
 <video id="video-play" class='video-play'src="xxxx">
 <cover-view class='cover' ></cover-view>
 </video>
</view>
</template>

<style>
.cover3
position: absolute;
bottom: 0px;
z-index: 998;
height: 20%;
margin-left: 60px; //- 左边60px不遮罩，用户仍可点击播放暂停
width: 70%;//- 右边留出一点，用户仍可点击全屏、退出全屏
</style></pre>
</div>
 

</div>
<div id="MySignature" role="contentinfo">
本文来自博客园，作者：''竹先森゜，转载请注明原文链接：https://www.cnblogs.com/zhuminghui/p/16049550.html 
来源：https://www.cnblogs.com/zhuminghui/p/16049550.html

頁: [1]

琼殿技术论坛's Archiver

微信小程序开发video遮罩功能（禁止拖动进度条）