คู่มือแนะนำการใช้งาน ByteArk

# เพลย์ลิสต์

Note

ฟีเจอร์นี้ของ ByteArk Player รองรับเฉพาะผู้ใช้ ByteArk Video Cloud for Business หากท่านต้องการใช้งานกรุณาติดต่อ sales@byteark.com

Byteark Player สามารถกำหนดให้เล่นวิดีโอหลายๆวิดีโอต่อเนื่องกันได้โดยการกำหนดเพลย์ลิสต์ เมื่อวิดีโอหนึ่งเล่นจบ วิดีโอถัดไปในเพลย์ลิสต์ จะถูกเล่นต่อโดยอัตโนมัติ โดยระบุ playlist ใน options เพื่อเรียกใช้งานการเล่นแบบเพลย์ลิสต์ ดังตัวอย่าง

# ตัวอย่างเพลย์ลิสต์

# การปรับตั้งค่า options

Options Type Default Description Required
playlist Array [] รายการของวิดีโอในเพลย์ลิสต์ Yes
playlist[].title String - ชื่อของวิดีโอที่จะนำมาแสดงบน video player No
playlist[].src String - URL ของวิดีโอ Yes
playlist[].type String - ประเภท (MIME Type) ของวิดีโอ Yes
playlist[].poster String - URL ของรูปภาพวิดีโอ No
playlistIndex Number 0 ลำดับของวิดีโอที่จะเล่นเป็นวิดีโอแรก No
playlistRepeat Boolean false เริ่มเล่นวิดีโอลำดับแรกสุดอีกครั้ง เมื่อวิดีโอสุดท้ายใน playlist เล่นจบ No
enableNextClipUI Boolean false แสดง UI นับถอยหลังก่อนเปลี่ยนไปวิดีโอถัดไป No

# ตัวอย่างซอร์สโค้ด

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="video-player"></div>
    <script src="https://byteark-sdk.cdn.byteark.com/player/v2/byteark-player.min.js"></script>
    <script>
      var player = bytearkPlayer('video-player', {
        fluid: true,
        poster: '/assets/samples/player/images/poster-big-buck-bunny.jpg',
        enableNextClipUI: true,
        playlist: [
          {
            title: 'Big Buck Bunny',
            src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
            type: 'application/x-mpegURL',
            poster: 'https://docs.byteark.com/assets/samples/player/images/poster-big-buck-bunny.jpg'
          },
          {
            title: 'Toya Lake Birds',
            src: 'https://qd-inox.s3.byteark.com/media/company-products/Q/D/s/QDsN7IEgG1Le/hls/720p/prog_index.m3u8',
            type: 'application/x-mpegURL',
            poster: 'https://docs.byteark.com/assets/samples/player/images/poster-big-buck-bunny.jpg'
          },
          {
            title: 'ByteArk Short Promo',
            src: 'https://qd-inox.s3.byteark.com/videos/720p/n/S/nSGkXRFNjm/prog_index.m3u8',
            type: 'application/x-mpegURL',
            poster: 'https://docs.byteark.com/assets/samples/player/images/poster-big-buck-bunny.jpg'
          }
        ],
        playlistIndex: 0
      });
    </script>
  </body>
</html>
1
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
37

# Methods

# player.playlist([Array newList], [Number newIndex]) -> Array

ทำหน้าที่ get หรือ set playlist ของ player ถ้า method นี้ไม่ถูก pass parameter เข้ามา method นี้จะทำหน้าที่เป็น getter แต่หากมีการ pass parameter เข้ามา method นี้จะทำหน้าที่เป็น setter

Parameters

Options Type Description
newList Array รายการของวิดีโอที่ต้องการจะ set ให้เพลย์ลิสต์
newIndex Number เลข index ของ playlistItem ที่ต้องการจะให้เล่น

Returns

Description Type
Playlist ของ player Array
// Init playlist and start playing at second item.
player.playlist([{
  sources: [{
    src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
    type: 'video/mp4'
  }],
  poster: 'https://media.w3.org/2010/05/sintel/poster.png'
}, {
  sources: [{
    src: 'https://media.w3.org/2010/05/bunny/trailer.mp4',
    type: 'video/mp4'
  }],
  poster: 'https://media.w3.org/2010/05/bunny/poster.png'
}, {
  sources: [{
    src: 'https://vjs.zencdn.net/v/oceans.mp4',
    type: 'video/mp4'
  }],
  poster: 'https://www.videojs.com/img/poster.jpg'
}, {
  sources: [{
    src: 'https://media.w3.org/2010/05/bunny/movie.mp4',
    type: 'video/mp4'
  }],
  poster: 'https://media.w3.org/2010/05/bunny/poster.png'
}, {
  sources: [{
    src: 'https://media.w3.org/2010/05/video/movie_300.mp4',
    type: 'video/mp4'
  }],
  poster: 'https://media.w3.org/2010/05/video/poster.png'
}], 1);
1
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

# player.playlist.currentItem([Number index]) -> Number

ทำหน้าที่ get หรือ set index ของ playlistItem ใน playlist ที่กำลังเล่น ณ ปัจจุบัน ถ้า method นี้ไม่ถูก pass parameter เข้ามา method นี้จะทำหน้าที่เป็น getter แต่หากมีการ pass parameter เข้ามา method นี้จะทำหน้าที่เป็น setter

Parameters

Options Type Description
index Number เลข index ของ playlistItem ที่ต้องการจะให้เล่น

Returns

Description Type
Index ของ วิดีโอในเพลย์ลิสต์ที่กำลังเล่น ณ ปัจจุบัน Number
// return 0
player.currentItem();
// Play second item.
player.currentItem(1);
1
2
3
4
5

# player.playlist.currentIndex() -> Number

ทำหน้าที่ get index ของ playlistItem ใน playlist ที่กำลังเล่น ณ ปัจจุบัน

Returns

Description Type
Index ของ วิดีโอในเพลย์ลิสต์ที่กำลังเล่น ณ ปัจจุบัน Number
// return 0
player.currentIndex();
1
2

# player.playlist.nextIndex() -> Number

ทำหน้าที่ get index ของ playlistItem อันถัดไป

Returns

Description Type
Index ของ playlistItem อันถัดไป หากไม่มีอันถัดไป return 0 Number
// return 0
player.currentIndex();
// return 1
player.nextIndex();
// Assume that playlist playing last item
// return 4
player.currentIndex();
// return 0
player.nextIndex();
1
2
3
4
5
6
7
8
9
10
11
12

# player.playlist.previousIndex() -> Number

ทำหน้าที่ get index ของ playlistItem อันก่อนหน้า

Returns

Description Type
Index ของ playlistItem อันก่อนหน้า หากไม่มีอันก่อนหน้า return 0 Number
// return 2
player.currentIndex();
// return 1
player.previousIndex();
// Assume that playlist playing first item
// return 0
player.currentIndex();
// return 0
player.previousIndex();
1
2
3
4
5
6
7
8
9
10
11
12

# player.playlist.lastIndex() -> Number

ทำหน้าที่ get index ของ playlistItem ตัวสุดท้าย

Returns

Description Type
Index ของ playlistItem ตัวสุดท้าย Number
// Assume that playlist has 5 items
// return 4
player.lastIndex();
1
2
3

# player.playlist.next() -> Object|undefined

เล่น playlistItem อันถัดไป

Returns

Description Type
Object ข้อมูลของ playlistItem อันถัดไป หากไม่มีอันถัดไป return undefined Object|undefined

# player.playlist.previous() -> Object|undefined

เล่น playlistItem อันก่อนหน้า

Returns

Description Type
Object ข้อมูลของ playlistItem อันก่อนหน้า หากไม่มีอันก่อนหน้า return undefined Object|undefined

# Events

# playlistchange

Event playlistchange จะเกิดขึ้นหลังจากที่มีการเปลี่ยนแปลง playlistItem (เมื่อมีการเรียกใช้ player.playlist()) "ยกเว้นครั้งแรก" ซึ่งการใช้งาน playlistchange event สามารถทำได้ตามตัวอย่างด้านล่าง

# ตัวอย่างซอร์สโค้ด

player.on('playlistchange', function(event) {
  // do something
});
1
2
3

# beforeplaylistitem

Event beforeplaylistitem จะเกิดขึ้นก่อนที่จะมีการเปลี่ยนวิดีโอ โดยจะส่ง media object ของวิดีโอถัดไปมาใน parameter ที่ 2 ของ callback function ซึ่งการใช้งาน beforeplaylistitem event สามารถทำได้ตามตัวอย่างด้านล่าง

# ตัวอย่างซอร์สโค้ด

player.on('beforeplaylistitem', function(event, item) {
  // do something
});
1
2
3

# playlistitem

Event playlistitem จะเกิดขึ้นหลังจากที่มีการเปลี่ยนวิดีโอ โดยจะส่ง media object ของวิดีโอถัดไปมาใน parameter ที่ 2 ของ callback function ซึ่งการใช้งาน playlistitem event สามารถทำได้ตามตัวอย่างด้านล่าง

# ตัวอย่างซอร์สโค้ด

player.on('playlistitem', function(event, item) {
  // do something
});
1
2
3

← VR/360° →

Pricing Contact Terms of Service