# เพลย์ลิสต์
คุณสามารถกำหนดให้ตัวเล่นวิดีโอเล่นวิดีโอหลายๆ วิดีโอต่อเนื่องกันได้โดยการกำหนดเพลย์ลิสต์ เมื่อวิดีโอหนึ่งเล่นจบ วิดีโอถัดไปในเพลย์ลิสต์ จะถูกเล่นต่อโดยอัตโนมัติ และผู้ใช้สามารถกดปุ่ม เพื่อเลือกดูรายการวิดีโอในเพลย์ลิสต์ได้
การกำหนดเพลย์ลิสต์ให้กำหนดเป็น array ของ media object ซึ่งมีแอททริบิวต์เหมือนกับการกำหนด media ในการเล่นวิดีโอเดียว ตัวอย่างเช่น
# ตัวอย่างซอร์สโค้ด
var player = byteark('element-id', {
playlist: [
{
title: 'Toya Lake Birds',
poster: '/assets/samples/player/legacy/images/poster-toya-lake-birds.jpg',
sources: [{
src: 'https://qd-inox.s3.byteark.com/media/company-products/Q/D/s/QDsN7IEgG1Le/hls/720p/prog_index.m3u8',
type: 'application/x-mpegURL'
}]
},
{
title: 'Pranburi Waves',
poster: '/assets/samples/player/legacy/images/poster-pranburi-waves.jpg',
sources: [{
src: 'https://qd-inox.s3.byteark.com/media/entertainment/Q/M/d/QMdPyKlYyr00/hls/720p/prog_index.m3u8',
type: 'application/x-mpegURL'
}]
},
{
title: 'Reality',
poster: '/assets/samples/player/legacy/images/poster-reality.jpg',
sources: [{
src: 'https://qd-inox.s3.byteark.com/media/entertainment/Q/M/d/QMdOTKQFo4ep/hls/720p/prog_index.m3u8',
type: 'application/x-mpegURL'
}]
},
{
title: 'ByteArk Short Promo',
poster: '/assets/samples/player/legacy/images/poster-byteark-short-promo.jpg',
sources: [{
src: 'https://qd-inox.s3.byteark.com/videos/720p/n/S/nSGkXRFNjm/prog_index.m3u8',
type: 'application/x-mpegURL'
}]
}
]
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
# Options
| Options | Type | Default | Description | Required |
|---|---|---|---|---|
| playlist | Array | [] | รายการของวิดีโอในเพลย์ลิสต์ | Yes |
| playlist[].title | String | - | ชื่อวิดีโอ | No |
| playlist[].poster | String | - | URL ของภาพหน้าปกวิดีโอ | No |
| playlist[].sources | Array | - | ข้อมูลของวิดีโอ | Yes |
| playlist[].sources[].src | String | - | URL ของวิดีโอ | Yes |
| playlist[].sources[].type | String | - | ประเภท (MIME Type) ของวิดีโอ | Yes |
| initialPlaylistIndex | Number | 0 | ลำดับขอวิดีโอที่จะเล่นเป็นวิดีโอแรก | No |
# Events
# beforeplaylistitem
Event beforeplaylistitem จะ__เกิดขึ้นก่อนที่จะมีการเปลี่ยนวิดีโอ__ โดยจะส่ง media object ของวิดีโอถัดไปมาใน parameter ที่ 2 ของ callback function ซึ่งการใช้งาน beforeplaylistitem event สามารถทำได้ตามตัวอย่างด้านล่าง
# ตัวอย่างซอร์สโค้ด
player.on('beforeplaylistitem', function(event, item) {
// do something
});
2
3
# playlistitem
Event playlistitem จะ__เกิดขึ้นหลังจากที่มีการเปลี่ยนวิดีโอ__ โดยจะส่ง media object ของวิดีโอถัดไปมาใน parameter ที่ 2 ของ callback function ซึ่งการใช้งาน playlistitem event สามารถทำได้ตามตัวอย่างด้านล่าง
# ตัวอย่างซอร์สโค้ด
player.on('playlistitem', function(event, item) {
// do something
});
2
3