video 视频

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

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

属性说明

objectFit 有效值

direction 有效值

主流格式支持

主流编码格式支持

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1

• SWAN
• JS

<view class="wrap">
    <view class="card-area">
        <video
            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">
        </video>
    </view>
    <view class="swan-cells">
        <view class="swan-cell swan-cell_input">
            <view class="swan-cell__hd">
                <view class="swan-label">弹幕内容</view>
            </view>
            <view class="swan-cell__bd">
                <input bindinput="bindInput" type="text" value="{=userMessage=}" placeholder="在此处输入弹幕内容" />
            </view>
        </view>
    </view>
    <view class="btn-area">
        <button class="page-body-button" type="primary" bindtap="sendDanmu">发送弹幕</button>
        <view class="page-section-btns bottom-border">
            <view hover-class="hover" bindtap="initialTime">指定初始播放位置为20s(播放前点击)</view>
            <view hover-class="hover" bindtap="controls">显示默认播放控件</view>
            <view hover-class="hover" bindtap="loop">设置循环播放</view>
        </view>
        <view class="page-section-btns bottom-border">
            <view hover-class="hover" bindtap="voice">点击{{voice ? '有音':'无音'}}</view>
            <view hover-class="hover" data-set="contain" bindtap="objectFit">包含容器</view>
            <view hover-class="hover" data-set="fill" bindtap="objectFit">填充容器</view>
        </view>
        <view class="page-section-btns bottom-border">
            <view hover-class="hover" data-set="cover" bindtap="objectFit">覆盖容器</view>
            <view hover-class="hover" bindtap="pageGesture">开启手势调节亮度与音量</view>
            <view hover-class="hover" bindtap="fullscreenBtn">{{fullscreenBtn?'不显示':'显示'}}全屏按钮</view>
        </view>
        <view class="page-section-btns bottom-border">
            <view hover-class="hover" bindtap="progressGesture">去掉全屏播放时手势控制进度</view>
            <view hover-class="hover" bindtap="playBtn">{{playBtn ? '': '不'}}显示视频底部控制栏的播放按钮</view>
            <view hover-class="hover" bindtap="centerPlayBtn">{{centerPlayBtn ? '': '不'}}显示视频中间的播放按钮</view>
        </view>
        <view class="page-section-btns bottom-border">
            <view hover-class="hover" bindtap="noWifiTip">wifi/4g浮层</view>
            <view hover-class="hover" bindtap="nextVideo">切换视频地址</view>
        </view>
        <view class="page-section-btns bottom-border">
            <view hover-class="hover" bindtap="rateBtn">{{showRateBtn ? '隐藏' : '显示'}}倍速播放按钮</view>
            <view hover-class="hover" bindtap="vslideBtnInFullscreen">{{showVslideBtnInFullscreen ? '隐藏': '显示'}}全屏模式下的侧边栏控件</view>
            <view hover-class="hover" bindtap="silentPlayMode">{{silentPlay ? '关闭': '开启'}}无声视频模式</view>
        </view>
    </view>
</view>

设计指南

默认情况，会在 video 组件的中间和左下角显示 2 个 play-btn，请根据小程序自身需要合理配置。不建议同时使用 2 个 play-btn，过多元素会增加用户理解成本。

正确

只用一个 play-btn，指引明确

错误

同时使用2个 play-btn，增加用户理解成本

图片示例

代码示例 2：controls

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

<view class="wrap">
    <view class="video-wrap">
        <video
            style="width: 100%;"
            id="myVideo"
            src="{{src}}"
            controls="{{controls}}">
        </video>
    </view>
    <button hover-class="hover" type="primary" bindtap="controls">显示默认播放控件</button>
</view>

图片示例

代码示例 3：title

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN

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

图片示例

代码示例 4：direction

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

<view class="wrap">
    <view class="video-wrap">
        <video
            style="width: 100%;"
            id="myVideo"
            src="{{src}}"
            direction="{{direction}}">
        </video>
    </view>
    <button data-direction="0" type="primary" bindtap="changeFullScreen">正常竖向</button>
    <button data-direction="90" type="primary" bindtap="changeFullScreen">屏幕顺时针90度</button>
    <button data-direction="-90" type="primary" bindtap="changeFullScreen">屏幕逆时针90度</button>
</view>

图片示例

代码示例 5：show-progress

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN

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

图片示例

代码示例 6：show-no-wifi-tip

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN

<view class="wrap">
    <view class="video-wrap">
        <video
            style="width: 100%;"
            id="myVideo"
            src="{{src}}"
            show-no-wifi-tip="{{true}}">
        </video>
    </view>
</view>

Bug & Tip

• Bug：百度 App 11.26 版本，在视频列表场景下，同时设置show-play-btn属性和show-center-play-btn属性值为true可能会出现失焦视频播放控件不显示的情况，因此建议在视频列表场景中，将video组件的show-play-btn属性设置为false。
• Tip：同一页面下的 video 标签不应太多，建议不超过 5 个，视频列表功能建议使用 image 列表，选中时替换为 video 。
• Tip：避免多个 video 同时播放，视频预览建议使用 gif 方案，使用 video 会降低性能和体验。

Web 态 Tip

Tip1：在部分浏览器下，视频无法自动播放的解决方案

案例分析：
出于用户体验、节省流量等原因，OS 的 Safari、版本号 66 及以上的 Chrome、以及大部分国产移动浏览器禁止视频在非静音状态下自动播放。因此，Web 态针对 video 组件中 autoplay 属性设置为 true 后做了如下处理：

• 对于 QQ、Android 微信、 QQ 浏览器等基于 X5 内核的平台，Web 态下设置的 autoplay = true 不生效，页面进入时，视频组件上显示播放按钮供用户主动点击触发播放。
• 对于其他非 X5 内核的平台，为保证页面进入时可自动播放，会默认关闭声音播放，并显示“取消静音”按钮，供用户主动开启声音。
• 为“取消静音”和播放按钮设置了较高的 z-index 样式层级，开发者可以根据需要来决定是否覆盖这两类按钮。

由于浏览器种类众多，如出现自动播放相关新问题，请将案例反馈给我们，我们将统一记录并反馈进展。

Tip2：视频类资源地址必须有文件扩展名（即文件后缀）

由于浏览器无法解析资源格式。因此对于视频类资源，应在地址中通过后缀名显式声明资源格式，否则可能会导致视频无法正常播放：

• Web 态 video 组件目前支持 mp4、mov、m4v、ogg、m3u8 等格式，参见上述主流格式支持小节。
• 当 video 组件的 src 属性值没有文件扩展名，视频会被按照 mp4 格式来进行解码播放。

Tip3：在部分浏览器下，视频播放器会遮挡其他页面元素 / 小窗播放问题的解决方案

案例分析：
微信、百度 App、UC 等浏览器实现了自身的播放器控件，劫持了默认内核提供的播放器样式和逻辑，从而使得基于 H5 video 实现的 Web 态 video 组件出现了以下问题：

• 在 Android 系统的微信平台、百度 App 和 UC 等国产移动浏览器下，Video 组件的播放器会覆盖到页面其他内容之上，且无法通过 z-index 控制层级，从而导致一些交互失效（比如无法上下滑动触发切换视频）。
• 在 OPPO 手机下的百度 App，会出现小窗播放。

解决方案：
Web 态针对不同浏览器做了尽可能的修复，以解决此问题。已修复的包括 QQ、Android 微信、QQ 浏览器等基于 X5 内核的平台，百度 App。但由于浏览器种类众多，有可能存在我们暂未覆盖到的情况。如仍遇到上述问题，请您将案例反馈给我们，我们将统一记录并反馈进展。

Tip4：在部分浏览器下，视频播放器退出全屏后会暂停播放

案例分析：
微信、QQ、QQ 浏览器等实现了自身的播放控件，从而使得 video 组件在退出全屏时出现视频暂停播放的问题。

解决方案：
Web 态针对 Android 下的微信、QQ 等基于 X5 内核的平台在退出全屏时展示一个中间播放按钮，供用户点击来继续播放视频。OS 下因无法监听退出全屏事件，此问题暂无法解决。