微信小程序開發video遮罩功能（禁止拖動進度條）

痛點

　　在微信小程序的標簽中，<video> 標簽的默認層級相當高，很多自定義標簽即使設定了 z-index，也無法覆蓋在 <video> 標簽上，特別是在視頻進入全屏狀態下時。

　　有些時候我們需要在視頻上顯示一些自定義內容，或者禁止用戶拖動進度條（小程序開發中 <video> 標簽只有禁止手勢拖動的屬性設置，沒有直接禁止進度條拖動的屬性設置），就需要能有遮罩蓋在 <video> 標簽上方。

　　網上有方法說給<video>標簽加上屬性 x5-video-player-type="h5-page" ，注意 x5-playsinline webkit-playsinline playsinline x-webkit-airplay="true" 都不要亂加，但是親測發現並沒有什么效果。

<cover-view> 標簽

微信開發者文檔地址：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

• App 端 vue 頁面 cover-view、cover-image 中不支持嵌套其它組件，包括再次嵌套 cover-view，僅可覆蓋 video、map。App 端 nvue 頁面自 2.1.5 起沒有這些限制。
• App 端 cover-image 使用本地圖像的話，打包前需要設置資源為釋放模式，在 manifest 文件內 app-plus 新增 runmode 節點，設置值為 liberate。
• App 端還可以使用 plus.nativeObj.view 繪制原生內容，參考:uni-app中使用5+界面控件 (opens new window)、plus.nativeObj.view規范(opens new window)
• App 端還提供了更靈活和強大的 subNvue，參考 原生子窗體subNvue
• 在 video 組件中使用時，若想在全屏模式下使用 cover-view，只有在微信小程序、App 端的 nvue 頁面可實現。
• 在App 端，如果重度使用 video 和 map，推薦使用 nvue 頁面。
• 百度小程序 iOS 端暫不支持一個頁面有多個 video 時嵌套 cover-view。
• 支付寶小程序中 cover-view 不支持嵌套。

注意事項2

• cover-view 和 cover-image 的 aria-role 僅可設置為 button，讀屏模式下才可以點擊，並朗讀出“按鈕”；為空時可以聚焦，但不可點擊
• 基礎庫 2.2.4 起支持 touch 相關事件，也可使用 hover-class 設置點擊態
• 基礎庫 2.1.0 起支持設置 scale rotate 的 css 樣式，包括 transition 動畫
• 基礎庫 1.9.90 起 cover-view 支持 overflow: scroll，但不支持動態更新 overflow
• 基礎庫 1.9.90 起最外層 cover-view 支持 position: fixed
• 基礎庫 1.9.0 起支持插在 view 等標簽下。在此之前只可嵌套在原生組件 map、video、canvas、camera內，避免嵌套在其他組件內。
• 基礎庫 1.6.0 起支持 css transition動畫，transition-property 只支持 transform (translateX, translateY) 與 opacity。
• 基礎庫 1.6.0 起支持 css opacity。
• 事件模型遵循冒泡模型，但不會冒泡到原生組件。
• 文本建議都套上 cover-view 標簽，避免排版錯誤。
• 只支持基本的定位、布局、文本樣式。不支持設置單邊的 border、background-image、shadow、overflow: visible等。
• 建議子節點不要溢出父節點
• 支持使用 z-index 控制層級
• 默認設置的樣式有：white-space: nowrap; line-height: 1.2; display: block;
• 自定義組件嵌套 cover-view 時，自定義組件的 slot 及其父節點暫不支持通過 wx:if 控制顯隱，否則會導致 cover-view 不顯示

 

不支持的 CSS

• position: fixed
• opacity
• overflow
• padding
• linebreak
• white-space

注意：nvue的cover-view不在上述限制中，它僅支持且全部支持nvue的所有css。

 

示例代碼

<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>

 

禁止拖動進度條

　　在小程序開發時，會遇到這樣的需求：用戶只能老老實實看視頻，不能拖動進度條。在微信開發者文檔中，<video> 標簽的 enable-progress-gesture 屬性為 false 時，可禁止控制進度的手勢，但是並未提供直接禁止拖動進度條的屬性，若將 controls 屬性設為 false，則是直接不顯示播放/暫停按鈕、播放進度、時間，雖然實現了禁止拖動的功能，但用戶體驗很不友好。

實現思路

　　設置一個遮罩，覆蓋在進度條的位置。在通常情況下，定義一個 <view>，蔣 z-index 設置為 999 是可以蓋在 <video> 標簽上的，但是當視頻全屏播放時就失效了，因為全屏播放的視頻顯示層級相當高。這時就需要  <cover-view> 標簽。

　　 <cover-view>標簽 寫在 <video> 標簽內，設置固定的位置以及長寬即可。全屏時會隨着視頻旋轉一起旋轉，設置長寬最好用百分比的形式，這樣全屏時會隨着視頻大小一起變化，完美解決。

代碼示例

<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>