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

video 視頻

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

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

屬性說明

objectFit 有效值

direction 有效值

主流格式支持

主流編碼格式支持

示例

跳轉編輯工具

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

在 WEB IDE 中打開

掃碼體驗

代碼示例

請使用百度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(播放前點擊)
  
  
  
 顯示默認播放控件
  
  
  
 設置循環(huán)播放
  
  
  
 
  
  
  

  
  
  
 
  
  
  
 點擊{{voice ? '有音':'無音'}}
  
  
  
 包含容器
  
  
  
 填充容器
  
  
  
 
  
  
  

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

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

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

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

 
 
 

設計指南

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

正確

只用一個 play-btn，指引明確

錯誤

同時使用2個 play-btn，增加用戶理解成本

圖片示例

 
 
 

  
  
  

  
  
  
 
  
  
  
 

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

 
 
 

 
 
 

  
  
  

  
  
  
 
  
  
  
 

  
  
  
 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}}">
  
  
  
 
  
  
  
 
  
  
  
 正常豎向
  
  
  
 屏幕順時針90度
  
  
  
 屏幕逆時針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}}">