Skip to main content

player

Last updated on

player là component hỗ trợ xem video trên youtube. Không giống như video component hỗ trợ cho cả native và web video, player component chỉ hỗ trợ dạng web video.

Khả dụng: chỉ được hỗ trợ từ phiên bản 1.88.4 trở lên.

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ệuBắt buộcGiá tri mặc địnhMô tả
urlstringĐường dẫn của video. Hỗ trợ các file local hoặc youtube
playingbooleanfalseCho phép phát hay dừng player
loopnumberfalseCho phép lặp lại video
controlsbooleanfalseCho phép hiển thị các controls cho video
volumenumberMức độ âm lượng của video. Nhận giá trị từ 0 tới 1
mutednumberfalseCho phép tắt tiếng video
onPlayerReadyeventSự kiện được gọi khi video đã sẵn sàng để phát
onStarteventSự kiện được gọi khi video bắt đầu phát hoặc được phát lại sau khi tạm dừng
onPauseeventSự kiện được gọi khi video tạm dừng
onProgresseventSự kiện được gọi khi thời gian phát của video thay đổi. event.detail = { played: number; playedSeconds: number; loaded: number; loadedSeconds: number }
onSeekeventSự kiện được gọi khi video nhảy tới một thời điểm nào đó. event.detail = { seconds: number }
onErroreventSự kiện được gọi khi video bị lỗi
Lưu ý
  • Do chính sách của một số trình duyệt, video không thể Auto play được (xem tại đây). Vì lẽ đó, để autoplay video, bạn cần thiết lập giá trị của playing là true và phải tắt tiếng đi với muted là true.
  • Trên simulator của studio bạn không thể bận fullscreen của video được

Sample Code

Một số component được sử dụng trong source API Demo.

index.txml
<view>
<block-header title="Usage" description="Allows play a local video or youtube on app" />
<view class="block-content">
<view class="video-contain">
<player
controls
url="https://www.youtube.com/watch?v=-HiYWgBB30g"
onPlayerReady="onPlayerReady"
onStart="onStart"
onProgress="onProgress"
onDuration="onDuration"
onPause="onPause"
onSeek="onSeek"
onEnded="onEnded"
onError="onError"
/>
</view>
</view>
</view>
index.js
Page({
onPlayerReady() {
console.log('onPlayerReady');
},
onStart() {
console.log('onPlayerReady');
},
onProgress(progress) {
console.log('onProgress', progress);
},
onDuration(duration) {
console.log('onDuration', duration);
},
onPause() {
console.log('onPause');
},
onSeek(seek) {
console.log('onSeek', seek);
},
onEnded() {
console.log('onEnded');
},
onError(err) {
console.log('error', err);
}
});