• video 視頻
  • 屬性說(shuō)明
    • objectFit 有效值
    • direction 有效值
    • 主流格式支持
    • 主流編碼格式支持
  • 示例
    • 代碼示例 1
    • 圖片示例
    • 代碼示例 2：controls
    • 圖片示例
    • 代碼示例 3：title
    • 圖片示例
    • 代碼示例 4：direction
    • 圖片示例
    • 代碼示例 5：show-progress
    • 圖片示例
    • 代碼示例 6：show-no-wifi-tip
  • Bug & Tip
  • Web 態(tài) Tip
    • Tip1：在部分瀏覽器下，視頻無(wú)法自動(dòng)播放的解決方案
    • Tip2：視頻類資源地址必須有文件擴(kuò)展名（即文件后綴）
    • Tip3：在部分瀏覽器下，視頻播放器會(huì)遮擋其他頁(yè)面元素 / 小窗播放問(wèn)題的解決方案
    • Tip4：在部分瀏覽器下，視頻播放器退出全屏后會(huì)暫停播放

video 視頻

v3.70.0 起支持同層渲染，更多請(qǐng)參考原生組件。

解釋：視頻。video 組件默認(rèn)寬度 300px 、高度 225px 。該組件還提供豐富的 API 來(lái)控制視頻的播放、暫停、全屏、彈幕等，詳見 swan.createVideoContext 。

屬性說(shuō)明

objectFit 有效值

direction 有效值

主流格式支持

主流編碼格式支持

示例

跳轉(zhuǎn)編輯工具

在開發(fā)者工具中打開

在 WEB IDE 中打開

掃碼體驗(yàn)

代碼示例

請(qǐng)使用百度APP掃碼

代碼示例 1

• SWAN
• JS

 
 
 

  
  
  

  
  
  
 
  
  
  
 

  
  
  
 style="width: 100%;"
  
  
  
 id="myVideo"
  
  
  
 title="這是title"
  
  
  
 src="{{src}}"
  
  
  
 initial-time="{{initialTime}}"
  
  
  
 duration="48"
  
  
  
 controls="{{controls}}"
  
  
  
 autoplay="{{false}}"
  
  
  
 loop="{{false}}"
  
  
  
 muted="{{voice}}"
  
  
  
 objectFit="{{objectFit}}"
  
  
  
 poster="{{posterSrc}}"
  
  
  
 page-gesture="{{pageGesture}}"
  
  
  
 direction="{{0}}"
  
  
  
 show-progress="{{progressGesture}}"
  
  
  
 show-fullscreen-btn="{{fullscreenBtn}}"
  
  
  
 enable-progress-gesture="{{false}}"
  
  
  
 danmu-list="{{danmuList}}"
  
  
  
 danmu-btn="{{true}}"
  
  
  
 enable-danmu="{{true}}"
  
  
  
 show-play-btn="{{playBtn}}"
  
  
  
 show-center-play-btn="{{centerPlayBtn}}"
  
  
  
 show-mute-btn="{{true}}"
  
  
  
 show-no-wifi-tip="{{noWifiTip}}"
  
  
  
 show-rate-btn="{{showRateBtn}}"
  
  
  
 show-vslide-btn-in-fullscreen="{{showVslideBtnInFullscreen}}"
  
  
  
 silent-play="{{silentPlay}}"
  
  
  
 vslide-gesture="{{true}}"
  
  
  
 vslide-gesture-in-fullscreen="{{true}}"
  
  
  
 enable-play-gesture="{{true}}"
  
  
  
 bindplay="videoPlay"
  
  
  
 bindpause="videoPause"
  
  
  
 binderror="videoError"
  
  
  
 bindended="videoEnded"
  
  
  
 bindwaiting="videoWaiting"
  
  
  
 bindtimeupdate="videoTimeupdate"
  
  
  
 bindfullscreenchange="fullscreen"
  
  
  
 bindloadedmetadata="loadedmetadata">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 彈幕內(nèi)容
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 發(fā)送彈幕
  
  
  

  
  
  
 
  
  
  
 指定初始播放位置為20s(播放前點(diǎn)擊)
  
  
  
 顯示默認(rèn)播放控件
  
  
  
 設(shè)置循環(huán)播放
  
  
  
 
  
  
  

  
  
  
 
  
  
  
 點(diǎn)擊{{voice ? '有音':'無(wú)音'}}
  
  
  
 包含容器
  
  
  
 填充容器
  
  
  
 
  
  
  

  
  
  
 
  
  
  
 覆蓋容器
  
  
  
 開啟手勢(shì)調(diào)節(jié)亮度與音量
  
  
  
 {{fullscreenBtn?'不顯示':'顯示'}}全屏按鈕
  
  
  
 
  
  
  

  
  
  
 
  
  
  
 去掉全屏播放時(shí)手勢(shì)控制進(jìn)度
  
  
  
 {{playBtn ? '': '不'}}顯示視頻底部控制欄的播放按鈕
  
  
  
 {{centerPlayBtn ? '': '不'}}顯示視頻中間的播放按鈕
  
  
  
 
  
  
  

  
  
  
 
  
  
  
 wifi/4g浮層
  
  
  
 切換視頻地址
  
  
  
 
  
  
  

  
  
  
 
  
  
  
 {{showRateBtn ? '隱藏' : '顯示'}}倍速播放按鈕
  
  
  
 {{showVslideBtnInFullscreen ? '隱藏': '顯示'}}全屏模式下的側(cè)邊欄控件
  
  
  
 {{silentPlay ? '關(guān)閉': '開啟'}}無(wú)聲視頻模式
  
  
  
 
  
  
  
 
  
  
  

 
 
 

設(shè)計(jì)指南

默認(rèn)情況，會(huì)在 video 組件的中間和左下角顯示 2 個(gè) play-btn，請(qǐng)根據(jù)小程序自身需要合理配置。不建議同時(shí)使用 2 個(gè) play-btn，過(guò)多元素會(huì)增加用戶理解成本。

正確

只用一個(gè) play-btn，指引明確

錯(cuò)誤

同時(shí)使用2個(gè) play-btn，增加用戶理解成本

圖片示例

 
 
 

  
  
  

  
  
  
 
  
  
  
 

  
  
  
 style="width: 100%;"
  
  
  
 id="myVideo"
  
  
  
 src="{{src}}"
  
  
  
 controls="{{controls}}">
  
  
  
 
  
  
  
 
  
  
  
 顯示默認(rèn)播放控件
  
  
  

 
 
 

 
 
 

  
  
  

  
  
  
 
  
  
  
 

  
  
  
 style="width: 100%;"
  
  
  
 id="myVideo"
  
  
  
 src="https://b.bdstatic.com/swan-temp/940fe716b0eaad38f47b209d61657490.mp4"
  
  
  
 title="全屏title">
  
  
  
 
  
  
  
 
  
  
  

 
 
 

 
 
 

  
  
  

  
  
  
 
  
  
  
 

  
  
  
 style="width: 100%;"
  
  
  
 id="myVideo"
  
  
  
 src="{{src}}"
  
  
  
 direction="{{direction}}">
  
  
  
 
  
  
  
 
  
  
  
 正常豎向
  
  
  
 屏幕順時(shí)針90度
  
  
  
 屏幕逆時(shí)針90度
  
  
  

 
 
 

 
 
 

  
  
  

  
  
  
 
  
  
  
 

  
  
  
 style="width: 100%;"
  
  
  
 id="myVideo"
  
  
  
 src="https://b.bdstatic.com/swan-temp/940fe716b0eaad38f47b209d61657490.mp4"
  
  
  
 show-progress="{{true}}">
  
  
  
 
  
  
  
 
  
  
  

 
 
 

 
 
 

  
  
  

  
  
  
 
  
  
  
 

  
  
  
 style="width: 100%;"
  
  
  
 id="myVideo"
  
  
  
 src="{{src}}"
  
  
  
 show-no-wifi-tip="{{true}}">