小程序video控件的使用
小程序video控件用來實現(xiàn)播放視頻的效果,是小程序基本的系統(tǒng)組件,下面為大家介紹要如何使用。
一、屬性
| 屬性名 | 類型 | 默認(rèn)值 | 說明 | 最低版本 |
|——–|——–|——–|——–|——–|
| src | String| | 要播放視頻的資源地址 | |
| initial-time| String | | 指定視頻初始播放位置| 1.6.0 |
| duration |Number|| 指定視頻時長 | 1.1.0 |
| controls |Boolean |true| 是否顯示默認(rèn)播放控件(播放/暫停按鈕、播放進(jìn)度、時間)| |
| danmu-list |Object Array||彈幕列表 | |
| danmu-btn |Boolean|false | 是否顯示彈幕按鈕,只在初始化時有效,不能動態(tài)變更| |
| enable-danmu |Boolean|false| 是否展示彈幕,只在初始化時有效,不能動態(tài)變更 | |
|autoplay|Boolean|false|是否自動播放| |
|loop|Boolean|false|是否循環(huán)播放| 1.4.0 |
|muted|Boolean|false|是否靜音播放| 1.4.0 |
|page-gesture|Boolean|false|在非全屏模式下,是否開啟亮度與音量調(diào)節(jié)手勢|1.6.0 |
|direction|Number||設(shè)置全屏?xí)r視頻的方向,不指定則根據(jù)寬高比自動判斷。有效值為 0(正常豎向), 90(屏幕逆時針90度), -90(屏幕順時針90度)|1.7.0|
|bindplay|EventHandle||當(dāng)開始/繼續(xù)播放時觸發(fā)play事件| |
|bindpause|EventHandle||當(dāng)暫停播放時觸發(fā) pause 事件| |
|bindended|EventHandle||當(dāng)播放到末尾時觸發(fā) ended 事件| |
|bindtimeupdate|EventHandle||播放進(jìn)度變化時觸發(fā),event.detail = {currentTime, duration} 。觸發(fā)頻率 250ms 一次| |
|bindfullscreenchange|EventHandle||當(dāng)視頻進(jìn)入和退出全屏是觸發(fā),event.detail = {fullScreen, direction},direction取為 vertical 或 horizontal| |
|objectFit|String|contain|當(dāng)視頻大小與 video 容器大小不一致時,視頻的表現(xiàn)形式。contain:包含,fill:填充,cover:覆蓋| 1.4.0|
|poster|String||視頻封面的圖片網(wǎng)絡(luò)資源地址,如果 controls 屬性值為 false 則設(shè)置 poster 無效| |
||||||
video 組件 默認(rèn)寬度300px、高度225px,可通過wxss設(shè)置寬高。
三、相關(guān)實現(xiàn)api
1、wx.createVideoContext
創(chuàng)建并返回 video 上下文 videoContext 對象。在自定義組件下,第二個參數(shù)傳入組件實例this,以操作組件內(nèi) video 組件
2、videoContext對象
videoContext 通過 videoId 跟一個 video 組件綁定,通過它可以操作一個 video 組件。
videoContext 對象的方法列表:
| 方法 | 參數(shù) | 說明 | 最低版本 |
|——–|——–|——–|——–|
|play | 無| 播放 | |
|pause| 無| 暫停 | |
|seek | position| 跳轉(zhuǎn)到指定位置,單位 s| |
|sendDanmu|danmu|發(fā)送彈幕,danmu 包含兩個屬性 text, color。||
|sendDanmu|danmu|發(fā)送彈幕,danmu 包含兩個屬性 text, color。||
|sendDanmu|danmu|發(fā)送彈幕,danmu 包含兩個屬性 text, color。||
|playbackRate|rate|設(shè)置倍速播放,支持的倍率有 0.5/0.8/1.0/1.25/1.5|1.4.0|
|requestFullScreen|無|進(jìn)入全屏,可傳入{direction}參數(shù)(1.7.0起支持),詳見video組件文檔|1.4.0|
|exitFullScreen|無|退出全屏|1.4.0|
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。