开发
API

video

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

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

代码示例

开发者工具中预览

属性说明

属性名类型默认值必填说明最低支持版本
srcstring要播放的视频资源地址1.0.0
autoplaybooleanfalse是否自动播放1.0.0
posterstring视频封面的图片网络资源地址1.0.0
bindplayeventhandle当开始播放时触发 play 事件1.0.0
bindpauseeventhandle当暂停播放时触发 pause 事件1.0.0
bindendedeventhandle当播放到末尾时触发 ended 事件1.0.0
binderroreventhandle视频播放出错时触发 error 事件1.0.0
bindtimeupdateeventhandle播放进度变化时触发,event.detail = { currentTime, duration }1.18.0
bindfullscreenchangeeventhandle视频进入和退出全屏时触发1.18.0
loopbooleanfalse是否循环播放1.47.0
show-fullscreen-btnbooleantrue是否显示全屏按钮1.47.0
show-play-btnbooleantrue是否显示播放、暂停、重播按钮,不包括视频封面的播放按钮1.47.0
controlsbooleantrue是否显示全部播放控件1.47.0
object-fitstringcontain当视频大小与 video 容器大小不一致时,视频的表现形式:contain(包含),fill(填充),cover(覆盖)1.47.0
play-btn-positionstringcenter播放按钮的位置:center(视频中间),bottom(控制条上)1.47.0
bindwaitingeventhandle视频出现缓冲时触发1.47.0
pre-roll-unit-idstring前贴广告的 unit id1.62.0
post-roll-unit-idstring后贴广告的 unit id1.62.0
bindadstarteventhandle贴片广告开始播放时触发,event.detail = { adType: 'preRollAd' | 'postRollAd' }1.62.0
bindadendedeventhandle贴片广告播放结束时触发,event.detail = { adType: 'preRollAd' | 'postRollAd' }1.62.0
bindadloadeventhandle贴片广告加载成功时触发,event.detail = { adType: 'preRollAd' | 'postRollAd' }1.62.0
bindadcloseeventhandle贴片广告非自然结束时触发,如:用户关闭广告或广告播放过程中 video 组件被销毁,event.detail = { adType: 'preRollAd' | 'postRollAd' }1.62.0
bindaderroreventhandle贴片广告加载失败时触发,event.detail = { adType: 'preRollAd' | 'postRollAd' }1.62.0
bindloadedmetadataeventhandle视频元数据加载完成时触发。event.detail = {width, height, duration}1.90.0

支持格式

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

今日头条

视频格式AndroidiOS
mp4
m3u8
mov
m4v
aviX
flvX
3gpX
webmX
hls

抖音

视频格式AndroidiOS
mp4
m3u8
mov
m4v
aviX
flvX
3gpX
webmXX
hls

西瓜视频

视频格式AndroidiOS
mp4
m3u8
mov
m4v
aviX
flvX
3gpX
webmX
hls

皮皮虾

视频格式AndroidiOS
mp4
m3u8
mov
m4v
aviXX
flvXX
3gpXX
webmXX
hls

火山小视频

视频格式AndroidiOS
mp4
m3u8
mov
m4v
aviXX
flvXX
3gpXX
webmXX
hls

头条 Lite

视频格式AndroidiOS
mp4
m3u8
mov
m4v
aviX
flvX
3gpX
webmX
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:贴片广告功能目前仅供企业用户使用,需要在小程序开发者平台申请。
点击纠错
评价此篇文档