• video 视频
  • 属性说明
    • objectFit 有效值
    • direction 有效值
    • 主流格式支持
    • 主流编码格式支持
  • 示例
    • 代码示例 1
    • 图片示例
    • 代码示例 2：controls
    • 图片示例
    • 代码示例 3：title
    • 图片示例
    • 代码示例 4：direction
    • 图片示例
    • 代码示例 5：show-progress
    • 图片示例
    • 代码示例 6：show-no-wifi-tip
  • Bug & Tip
  • Web 态 Tip
    • Tip1：在部分浏览器下，视频无法自动播放的解决方案
    • Tip2：视频类资源地址必须有文件扩展名（即文件后缀）
    • Tip3：在部分浏览器下，视频播放器会遮挡其他页面元素 / 小窗播放问题的解决方案
    • Tip4：在部分浏览器下，视频播放器退出全屏后会暂停播放

video 视频

v3.70.0 起支持同层渲染，更多请参考原生组件。

解释：视频。video 组件默认宽度 300px 、高度 225px 。该组件还提供丰富的 API 来控制视频的播放、暂停、全屏、弹幕等，详见 swan.createVideoContext 。

属性说明

objectFit 有效值

direction 有效值

主流格式支持

主流编码格式支持

示例

跳转编辑工具

在开发者工具中打开

在 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">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 弹幕内容
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 发送弹幕
  
  
  

  
  
  
 
  
  
  
 指定初始播放位置为20s(播放前点击)
  
  
  
 显示默认播放控件
  
  
  
 设置循环播放
  
  
  
 
  
  
  

  
  
  
 
  
  
  
 点击{{voice ? '有音':'无音'}}
  
  
  
 包含容器
  
  
  
 填充容器
  
  
  
 
  
  
  

  
  
  
 
  
  
  
 覆盖容器
  
  
  
 开启手势调节亮度与音量
  
  
  
 {{fullscreenBtn?'不显示':'显示'}}全屏按钮
  
  
  
 
  
  
  

  
  
  
 
  
  
  
 去掉全屏播放时手势控制进度
  
  
  
 {{playBtn ? '': '不'}}显示视频底部控制栏的播放按钮
  
  
  
 {{centerPlayBtn ? '': '不'}}显示视频中间的播放按钮
  
  
  
 
  
  
  

  
  
  
 
  
  
  
 wifi/4g浮层
  
  
  
 切换视频地址
  
  
  
 
  
  
  

  
  
  
 
  
  
  
 {{showRateBtn ? '隐藏' : '显示'}}倍速播放按钮
  
  
  
 {{showVslideBtnInFullscreen ? '隐藏': '显示'}}全屏模式下的侧边栏控件
  
  
  
 {{silentPlay ? '关闭': '开启'}}无声视频模式
  
  
  
 
  
  
  
 
  
  
  

 
 
 

设计指南

默认情况，会在 video 组件的中间和左下角显示 2 个 play-btn，请根据小程序自身需要合理配置。不建议同时使用 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}}">