小程式video組件屬性與使用方法-移動開發平台 mPaaS-阿里雲

基礎庫版本 1.14.1 開始支援本組件。

在 Android 工程中，從 mPaaS 10.1.58.12 開始可使用視訊組件，且需要在工程中添加 小程式-視頻 組件後方可使用，見下圖。

mini-video

您可通過 video 組件上傳並播放視頻。相關 API 說明，參見 my.createVideoContext。

說明

CSS 動畫對 video 組件無效。
自訂豎屏觀看視頻時兩邊出現的白色填充：
- 如果是因為視頻的寬高比跟 video 組件的寬高比不一致，請通過 object-fit 進行調整。
- 如果是由於 poster 實際的寬高比跟容器的寬高比不一致，請通過 poster-size 進行調整。

效果樣本

video

屬性

屬性名稱	類型	預設值	說明
style	String	-	內聯樣式。
class	String	-	外部樣式名。
src	String	-	要播放視頻的資源地址，支援優酷視頻編碼。src 支援的協議如下：`apFilePath: https://resource/xxx.video`
poster	String	-	視頻封面圖的 URL，支援 jpg、png 等圖片，如 `https://***.jpg`。如果不傳，則預設取視頻的首幀圖作為封面圖。
objectFit	String	contain	當視頻大小與 video 容器大小不一致時，視頻的表現形式。 contain：包含。 fill：填充。
initial-time	Number	-	指定視頻初始播放位置，單位為 s。
duration	Number	-	指定視頻時間長度，單位為 s，預設讀取視頻本身時間長度資訊。
controls	Boolean	true	是否顯示預設播放控制項（底部工具條，包括播放/暫停按鈕、播放進度、時間）。
autoplay	Boolean	false	是否自動播放。該功能在 Android 10 系統上有相容性問題，建議不要開啟自動播放。
direction	Number	-	設定全屏時視頻的方向，不指定則根據寬高比自動判斷。有效值為： 0（正常豎向）。 90（螢幕逆時針 90 度）。 -90（螢幕順時針 90 度）。
loop	Boolean	false	是否迴圈播放。
muted	Boolean	false	是否靜音播放。
show-fullscreen-btn	Boolean	true	是否顯示全屏按鈕。
show-play-btn	Boolean	true	是否顯示視頻底部控制欄的播放按鈕。
show-center-play-btn	Boolean	true	是否顯示視頻中間的播放按鈕。
show-mute-btn	Boolean	true	是否展示工具列上的靜音按鍵。
show-thin-progress-bar	Boolean	false	當底部工具條隱藏時，是否顯示細進度條（controls=false 時設定無效）。
enableProgressGesture	Boolean	true	全螢幕模式下是否開啟控制進度的手勢。
mobilenetHintType	Number	1	移動網路提醒樣式： 0-不提醒。 1-tip 提醒。 2-阻塞提醒（無消耗流量大小提醒）。 3-阻塞提醒（有消耗流量大小提醒）。
onPlay	EventHandle	-	當開始/繼續播放時觸發 play 事件。
onPause	EventHandle	-	當暫停播放時觸發 pause 事件。
onEnded	EventHandle	-	當播放至末尾時觸發 ended 事件。
onTimeUpdate	EventHandle	-	播放進度變化時觸發，`event.detail = {currentTime: '當前播放時間',userPlayDuration:'使用者實際觀看時間長度',videoDuration:'視頻總時間長度'}`
onLoading	EventHandle	-	視頻出現緩衝時觸發。
onError	EventHandle	-	視頻播放出錯時觸發（見下方錯誤碼列表）。
onFullScreenChange	EventHandle	-	視頻進入和退出全屏時觸發，`event.detail = {fullScreen, direction}`，`direction` 取為 vertical 或 horizontal。
onTap	EventHandle	-	點擊視頻 view 時觸發，`event.detail = {ptInView:{x:0,y:0}}`
onUserAction	EventHandle	-	使用者操作事件，`event.detail = {tag:"mute", value:0}`，tag 為使用者操作的元素，目前支援的 tag 有： play（底部播放按鈕）。 centerplay（中心播放按鈕）。 mute（靜音按鍵）。 fullscreen（全屏按鈕）。 retry（重試按鈕）。 mobilenetplay（網路提醒的播放按鈕）。
onStop	EventHandle	-	視頻播放終止。
onRenderStart	EventHandle	-	當視頻載入完真正開始播放時觸發。
onTap	EventHandle	-	點擊視頻 view 時觸發，`event.detail = {ptInView:{x:0,y:0}}`

程式碼範例

<view>
  <video id="myVideo" 
    src="{{video.src}}" 
    controls="{{video.showAllControls}}"
    loop="{{video.isLooping}}"
    muted="{{video.muteWhenPlaying}}"
    show-fullscreen-btn="{{video.showFullScreenButton}}"
    show-play-btn="{{video.showPlayButton}}"
    show-center-play-btn="{{video.showCenterButton}}"
    object-fit="{{video.objectFit}}"
    autoplay="{{video.autoPlay}}"
    direction="{{video.directionWhenFullScreen}}"
    initial-time="{{video.initTime}}"
    mobilenetHintType="{{video.mobilenetHintType}}"
    onPlay="onPlay" 
    onPause="onPause" 
    onEnded="onEnded"
    onError="onPlayError"
    onTimeUpdate="onTimeUpdate"
   />
</view>

Page({
  data: {
       status: "inited",
    time: "0",
    video: {
    src: "http://flv.bn.netease.com/tvmrepo/2012/7/C/7/E868IGRC7-mobile.mp4",
    showAllControls: false,
    showPlayButton: false,
    showCenterButton: true,
    showFullScreenButton: true,
    isLooping: false,
    muteWhenPlaying: false,
    initTime: 0,
    objectFit: "contain",
    autoPlay: false,
    directionWhenFullScreen: 90,
    mobilenetHintType: 2,
 },},

    onPlay(e) {
    console.log('onPlay');
},

    onPause(e) {
    console.log('onPause');
},

    onEnded(e) {
    console.log('onEnded');
},

    onPlayError(e) {
    console.log('onPlayError, e=' + JSON.stringify(e));
},

    onTimeUpdate(e) {
    console.log('onTimeUpdate:', e.detail.currentTime);
},
});

錯誤碼

錯誤碼	大類	詳細說明
1	loading、playing 過程中都可能拋出	未知錯誤。
1002	loading、playing 過程中都可能拋出	播放器內部錯誤。
1005	loading、playing 過程中都可能拋出	網路連接失敗。
1006	loading 異常	資料來源錯誤。
1007	loading 異常	播放器準備失敗。
1008	loading 異常	網路錯誤。
1009	loading 異常	搜尋視頻出錯（源出錯的一種）。
1010	loading 異常	準備逾時，也可認為是網路太慢或資料來源太慢導致的播放失敗。
400	loading 異常	讀 ups 資訊逾時。
3001	loading 異常	audio 渲染出錯。
3002	loading 異常	硬解碼錯誤。
2004	playing 過程中可能拋出	播放過程中載入時間逾時。
1023	playing 過程中可能拋出	播放中內部錯誤（ffmpeg 內錯誤）。

支援的視頻封裝格式

iOS、Android 支援以下視頻封裝格式：

mp4
mov
m4v
3gp
m3u8
flv

支援的編碼格式

iOS、Android 支援以下編碼格式：

H.264
H.265
AAC

常見問題

Q：video 組件中播放的視頻，當使用者載入觀看完視頻一次後再次進行觀看時，是拉取的緩衝，還是再次使用網路重新載入？
A：目前的緩衝策略是：
- 如果視頻是迴圈播放，再次觀看是拉取的緩衝。主要是針對一些迴圈播放的短視頻情境提供緩衝能力。
- 如果不是迴圈播放，每次都是網路重新載入。
Q：緩衝中的視頻何時會清除？
A：頁面銷毀或者關閉小程式時會清除。
Q：小程式如何擷取視頻時間長度？
A：在視頻組件 onTimeUpdate 方法中擷取。
Q：在 video 組件中設定 loop 欄位為迴圈播放，刪除視頻資源後，第二次播放會出現無法播放的情況。A：雖然再次播放拉取的是緩衝中的視頻，但是還是會校正視頻資源。