video

基础库 1.0.0 开始支持本组件。

视频组件。相关 API 请参考 tt.createVideoContext。

代码示例

属性说明

属性名	类型	默认值	必填	说明	最低支持版本
src	string		是	要播放的视频资源地址	1.0.0
autoplay	boolean	false	否	是否自动播放	1.0.0
poster	string		否	视频封面的图片网络资源地址	1.0.0
bindplay	eventhandle		否	当开始播放时触发 play 事件	1.0.0
bindpause	eventhandle		否	当暂停播放时触发 pause 事件	1.0.0
bindended	eventhandle		否	当播放到末尾时触发 ended 事件	1.0.0
binderror	eventhandle		否	视频播放出错时触发 error 事件	1.0.0
bindtimeupdate	eventhandle		否	播放进度变化时触发，event.detail = { currentTime, duration }	1.18.0
bindfullscreenchange	eventhandle		否	视频进入和退出全屏时触发	1.18.0
loop	boolean	false	否	是否循环播放	1.47.0
show-fullscreen-btn	boolean	true	否	是否显示全屏按钮	1.47.0
show-play-btn	boolean	true	否	是否显示播放、暂停、重播按钮，不包括视频封面的播放按钮	1.47.0
controls	boolean	true	否	是否显示全部播放控件	1.47.0
object-fit	string	contain	否	当视频大小与 video 容器大小不一致时，视频的表现形式：contain（包含），fill（填充），cover（覆盖）	1.47.0
play-btn-position	string	center	否	播放按钮的位置：center（视频中间），bottom（控制条上）	1.47.0
bindwaiting	eventhandle		否	视频出现缓冲时触发	1.47.0
pre-roll-unit-id	string		否	前贴广告的 unit id	1.62.0
post-roll-unit-id	string		否	后贴广告的 unit id	1.62.0
bindadstart	eventhandle		否	贴片广告开始播放时触发，`event.detail = { adType: 'preRollAd' \| 'postRollAd' }`	1.62.0
bindadended	eventhandle		否	贴片广告播放结束时触发，`event.detail = { adType: 'preRollAd' \| 'postRollAd' }`	1.62.0
bindadload	eventhandle		否	贴片广告加载成功时触发，`event.detail = { adType: 'preRollAd' \| 'postRollAd' }`	1.62.0
bindadclose	eventhandle		否	贴片广告非自然结束时触发，如：用户关闭广告或广告播放过程中 video 组件被销毁，`event.detail = { adType: 'preRollAd' \| 'postRollAd' }`	1.62.0
bindaderror	eventhandle		否	贴片广告加载失败时触发，`event.detail = { adType: 'preRollAd' \| 'postRollAd' }`	1.62.0
bindloadedmetadata	eventhandle		否	视频元数据加载完成时触发。`event.detail = {width, height, duration}`	1.90.0

支持格式

不同的 APP 宿主以及不同的系统对视频格式的支持程度是不一样的。

今日头条

视频格式	Android	iOS
mp4	√	√
m3u8	√	√
mov	√	√
m4v	√	√
avi	√	X
flv	√	X
3gp	√	X
webm	√	X
hls	√	√

抖音

视频格式	Android	iOS
mp4	√	√
m3u8	√	√
mov	√	√
m4v	√	√
avi	√	X
flv	√	X
3gp	√	X
webm	X	X
hls	√	√

西瓜视频

视频格式	Android	iOS
mp4	√	√
m3u8	√	√
mov	√	√
m4v	√	√
avi	√	X
flv	√	X
3gp	√	X
webm	√	X
hls	√	√

皮皮虾

视频格式	Android	iOS
mp4	√	√
m3u8	√	√
mov	√	√
m4v	√	√
avi	X	X
flv	X	X
3gp	X	X
webm	X	X
hls	√	√

火山小视频

视频格式	Android	iOS
mp4	√	√
m3u8	√	√
mov	√	√
m4v	√	√
avi	X	X
flv	X	X
3gp	X	X
webm	X	X
hls	√	√

头条 Lite

视频格式	Android	iOS
mp4	√	√
m3u8	√	√
mov	√	√
m4v	√	√
avi	√	X
flv	√	X
3gp	√	X
webm	√	X
hls	√	√

补充代码示例

【代码示例 1】：贴片广告示例

pre-roll-unit-id, post-roll-unit-id 使用示例

需要在小程序开发者平台中申请（见下方贴片广告申请流程），目前仅支持企业用户。

<view>
  <video
    id="myVideoAd"
    src="https://sf1-ttcdn-tos.pstatp.com/obj/developer/sdk/1534422848153.mp4"
    bindadstart="onAdStart"
    bindadended="onAdEnd"
    bindadload="onAdLoad"
    bindadclose="onAdClose"
    bindaderror="onAdError"
    pre-roll-unit-id="61d8rglj30t6ham8h6"
    post-roll-unit-id="otchj59is15fhm0ch4"
  ></video>
</view>

Page({
  data: {},
  onAdStart(e) {
    tt.showToast({
      title: "广告开始",
    });
    console.log("广告开始", e);
  },
  onAdEnd(e) {
    tt.showToast({
      title: "广告结束",
    });
    console.log("广告结束", e);
  },
  onAdLoad(e) {
    tt.showToast({
      title: "广告加载成功",
    });
    console.log("广告加载成功", e);
  },
  onAdError(e) {
    tt.showToast({
      title: "广告加载失败",
    });
    console.log("广告加载失败", e);
  },
  onAdClose(e) {
    tt.showToast({
      title: "广告关闭",
    });
    console.log("广告关闭", e);
  },
});

贴片广告申请流程

申请流程：小程序开发者平台 --> 进入目标小程序 --> 广告中心 --> 流量主。

扫码体验

请使用字节宿主APP扫码

Bug & Tip

Tip：不同宿主对视频格式支持有差异，详见文档说明。
Tip：安卓暂不支持 swiper 组件中使用 video 组件。
Tip：不同的 APP 宿主以及不同的系统对视频格式的支持程度是不一样，请参考文档中的详细说明。
Tip：贴片广告功能目前仅供企业用户使用，需要在小程序开发者平台申请。

点击纠错

评价此篇文档

video
代码示例
属性说明
支持格式
补充代码示例
扫码体验
Bug & Tip