# Storyboard

Note

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

ByteArk Player สามารถแสดงรูปภาพ preview thumbnail (Storyboard) บน seek bar เมื่อ mouse hover บน desktop pc หรือ เมื่อทำการ seek บนอุปกรณ์มือถือ โดย ByteArk Player ใช้ format WebVTT ในการโหลดและแสดงผลรูปภาพ preview thumbnail (Storyboard)

# การแสดงผล Storyboard

Storyboard

# การเปิดใช้งาน Storyboard บน ByteArk Player

การเปิดใช้งาน Storyboard บน ByteArk Player สามารถทำได้โดยระบุ plugins.bytearkStoryboard ใน options เมื่อทำการสร้าง video player จากนั้น player จะทำการค้นหาและแสดงผล Storyboard แบบอัตโนมัติ ถ้าหากวิดีโอที่เล่นอยู่บนระบบ ByteArk Stream และมีการเปิดใช้งาน storyboard หรือคุณสามารถระบุ url WebVTT file ของ storyboard เองได้โดยการเพิ่ม storyboard field ใน source object

# การตั้งค่า

Name	Type	Required	Default Value	Description
width	Number	No	160	ความกว้างเริ่มต้นของรูป storyboard
height	Number	No	90	ความสูงเริ่มต้นของรูป storyboard
xhrSetup	Function	No	undefined	xhr setup function (xhr: XMLHttpRequest, url: string) => void

# ตัวอย่าง

<!doctype html>
<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',
        sources: [{
          title: 'Big Buck Bunny',
          src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
          type: 'application/x-mpegURL',
        }],
        plugins: {
          bytearkStoryboard: {
          }
        }
      });
    </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

# ตัวอย่างซอร์สโค้ด แบบกำหนดค่า storyboard url เอง

<!doctype html>
<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',
        sources: [{
          title: 'Big Buck Bunny',
          src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
          type: 'application/x-mpegURL',
          storyboard: 'https://byteark-dev-player.st-th-1.byteark.com/storyboard/001/storyboard.vtt'
        }],
        plugins: {
          bytearkStoryboard: {
          }
        }
      });
    </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

<!doctype html>
<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',
        sources: [{
          title: 'Big Buck Bunny',
          src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
          type: 'application/x-mpegURL',
        }],
        plugins: {
          bytearkStoryboard: {
            xhrSetup: function (xhr, url) {
              xhr.withCredentials = true;
            },
          }
        }
      });
    </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

# ตัวอย่างไฟล์ WebVTT ของ Storyboard ที่ ByteArk Player รองรับ

WEBVTT
00:00.000 --> 00:05.000
/assets/storyboard.png#xywh=0,0,160,90
00:05.000 --> 00:10.000
/assets/storyboard.png#xywh=160,0,160,90
00:10.000 --> 00:15.000
/assets/storyboard.png#xywh=320,0,160,90
00:15.000 --> 00:20.000
/assets/storyboard.png#xywh=480,0,160,90
00:20.000 --> 00:25.000
/assets/storyboard.png#xywh=640,0,160,90

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17