免费AI编程助手
video
2020-02-11 18:45 更新
基础库 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 |
代码示例
<video
src="http://sf1-ttcdn-tos.pstatp.com/obj/ttfe/test/test-upload.mp4" rel="external nofollow"
autoplay
bindplay="play"
bindpause="pause"
bindended="ended"
bindtimeupdate="timeupdate"
bindfullscreenchange="fullscreenchange"
/>Page({
play: function(e) {
tt.showToast({ title: "play" });
},
pause: function(e) {
tt.showToast({ title: "pause" });
},
ended: function(e) {
tt.showToast({ title: "ended" });
},
timeupdate: function(e) {
console.log(e);
},
fullscreenchange: function(e) {
console.log(e);
}
});以上内容是否对您有帮助：
← image
更多建议：