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:贴片广告功能目前仅供企业用户使用,需要在小程序开发者平台申请。
点击纠错
评价此篇文档