Skip to main content

video

Last updated on

video là component cho phép người dùng phát video trên Tini App. Bạn có thể điều khiển component này thông qua my.createVideoContext api.

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
srcstringĐường dẫn tới tập tin video.
loopbooleanfalseTự động phát lại video một khi kết thúc.
autoplaybooleanfalseTự động phát video.
controlsbooleantrueHiển thị hay ẩn thanh điều khiển video (nút play/pause, playback progress bar, ...) của video player.
object-fitstringcontainQuy định cách thức điều chỉnh kích cỡ video sao cho vừa vặn video container. Nhận các giá trị [fill || contain || cover || none || scale down ] .
plays-inlinebooleanfalsePhát video ở chế độ nội tuyến (inline) hay chế độ toàn màn hình (fullscreen)
posterstringẢnh đại diện cho video trước khi video được phát.
onLoadingeventSự kiện được kích hoạt khi video đang tải dữ liệu để play
onCanPlayeventSự kiện được kích hoạt khi video có thể phát sau khi tải dữ liệu thành công
onPlayeventSự kiện được kích hoạt khi video bắt đầu được phát hoặc được phát tiếp sau khi tạm dừng
onPauseeventSự kiện được kích hoạt khi video bị tạm dừng.
onEndedeventSự kiện được kích hoạt khi video được phát đến hết.
onTimeUpdateeventSự kiện được kích hoạt khi thời điểm hiện tại của video thay đổi. event.detail = { currentTime: number }
onErroreventSự kiện được khích hoạt khi lỗi phát sinh trong lúc phát audio. event.detail = { errMsg: 'MEDIA_ERR_NETWORK' }.

Sample Code

index.txml
<video
id="video"
controls="false"
loop
object-fit="cover"
style="width: 100%; height: 100%;"
onPlay="onPlay"
onPause="onPause"
plays-inline
src="https://dev-tikiscp.tbox.vn/miniapps/miki/cat.mp4"
/>
index.js
Page({
onReady() {
const video = my.createAudioContext('video');
video.pause();
}
});