支付寶小程序媒體組件 視頻·video

版本需求：基礎(chǔ)庫(kù)版本 1.10.0 開始支持，低版本需要做 兼容處理。

用戶可通過 video 組件播放視頻。相關(guān) API：my.createVideoContext。

說明：

• css 動(dòng)畫對(duì) video 組件無效。
• 自定義豎屏觀看視頻時(shí)兩邊出現(xiàn)的白色填充：
  • 如果是因?yàn)橐曨l的寬高比跟 video 組件的寬高比不一致，請(qǐng)通過 object-fit 進(jìn)行調(diào)整 ；
  • 如果是由于 poster 實(shí)際的寬高比跟容器的寬高比不一致，請(qǐng)通過 poster-size 進(jìn)行調(diào)整。

掃碼體驗(yàn)

效果示例

示例代碼

<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: "XNDM0OTQzMDc2OA==",
    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);
},
});

屬性

錯(cuò)誤碼

支持的視頻封裝格式

iOS、Android 支持以下視頻封裝格式： mp4、mov、m4v、3gp、m3u8、flv

支持的編碼格式

iOS、Android 支持以下編碼格式： H.264、H.265、AAC

常見問題

video 組件中播放的視頻，當(dāng)用戶加載觀看視頻一次后，再次進(jìn)行觀看的時(shí)候是拉取的緩存，還是再次使用網(wǎng)絡(luò)重新加載的？

目前的緩存策略是如果視頻是循環(huán)播放的，再次觀看是拉取的緩存，如果不是循環(huán)播放，每次都是網(wǎng)絡(luò)重新加載。 主要是針對(duì)一些循環(huán)播放的短視頻場(chǎng)景提供緩存能力。

緩存中的視頻什么時(shí)候會(huì)清除掉 ？

頁(yè)面銷毀或者關(guān)閉小程序會(huì)清除掉。

小程序如何獲取視頻時(shí)長(zhǎng)？

在視頻組件 onTimeUpdate 方法中獲取。

video 組件，把 loop 字段設(shè)置為循環(huán)播放，在播放第二次的時(shí)候，把視頻資源刪除，發(fā)現(xiàn)無法播放 ？

雖然再次播放拉取的是緩存中的視頻，但是還是會(huì)校驗(yàn)視頻資源的。