เนื้อหา (Chapters)

ByteArk Player สามารถแบ่งวิดีโอออกเป็นช่วงเนื้อหา (chapter) ที่มีชื่อกำกับได้เหมือนบน YouTube ผู้ชมจะเห็นว่าแต่ละช่วงเริ่มต้นที่ตรงไหน กำลังดูช่วงไหนอยู่ และกดข้ามไปยังช่วงที่ต้องการได้ทันที โดยระบุ chapters ใน source object ของแต่ละวิดีโอ

การแสดงผล

• Seek bar: แบ่งออกเป็นช่วงตามจำนวน chapter เมื่อเลื่อนเมาส์ไปบน seek bar จะแสดงชื่อ chapter ใต้เวลา ถ้าเปิดใช้งาน Storyboard ชื่อ chapter จะแสดงอยู่ในกรอบรูปตัวอย่าง
• Control bar: แสดงชื่อ chapter ที่กำลังเล่นอยู่ต่อจากเวลา เมื่อกดจะเปิดรายการเนื้อหา และจะซ่อนเมื่อ player มีขนาดเล็ก
• ตั้งค่า → เนื้อหา: แสดงรายการ chapter ทั้งหมดพร้อมเวลาเริ่มต้นและชื่อ โดยมีเครื่องหมายถูกที่ chapter ที่กำลังเล่นอยู่ ถ้าเปิดใช้งาน Storyboard จะแสดงรูปตัวอย่างในแต่ละรายการด้วย เมื่อกดเลือก chapter วิดีโอจะข้ามไปยังจุดเริ่มต้นของ chapter นั้น ถ้าวิดีโอหยุดอยู่ก็จะยังหยุดอยู่ และถ้ากำลังเล่นอยู่ก็จะเล่นต่อ

การตั้งค่า

ระบุ chapters ใน source object ของแต่ละวิดีโอ เป็นไฟล์ WebVTT หรือรายการ chapter ก็ได้ แต่ละ source และแต่ละรายการใน playlist มี chapter ของตัวเองได้

Name	Type	Required	Description
chapters	Object	No	การตั้งค่า chapter ให้ระบุ src หรือ items อย่างใดอย่างหนึ่ง
chapters.src	String	No	URL ของไฟล์ WebVTT สำหรับ chapter
chapters.items	Array	No	รายการ chapter แต่ละรายการอยู่ในรูปแบบ { startTime, title }
chapters.items[].startTime	Number	Yes	เวลาเริ่มต้นของ chapter (หน่วยเป็นวินาที)
chapters.items[].title	String	Yes	ชื่อของ chapter

ระบุด้วยไฟล์ WebVTT

var player = bytearkPlayer('video-player', {
  sources: [{
    title: 'Big Buck Bunny',
    src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
    type: 'application/x-mpegURL',
    chapters: {
      src: 'https://example.com/chapters/big-buck-bunny.vtt'
    }
  }]
});

ระบุด้วยรายการ chapter

var player = bytearkPlayer('video-player', {
  sources: [{
    title: 'Big Buck Bunny',
    src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
    type: 'application/x-mpegURL',
    chapters: {
      items: [
        { startTime: 0, title: 'Opening Titles' },
        { startTime: 24, title: 'A Peaceful Morning in the Forest' },
        { startTime: 75, title: 'Big Buck Wakes Up' }
      ]
    }
  }]
});

รูปแบบไฟล์ chapter

ใช้ไฟล์ WebVTT มาตรฐาน โดยเวลาเริ่มต้นและข้อความของแต่ละ cue จะกลายเป็น 1 chapter

WEBVTT
chapter-1
00:00:00.000 --> 00:00:24.000
Opening Titles
chapter-2
00:00:24.000 --> 00:01:15.000
A Peaceful Morning in the Forest
chapter-3
00:01:15.000 --> 00:02:15.000
Big Buck Wakes Up

• แต่ละ chapter จะยาวไปจนถึงจุดเริ่มต้นของ chapter ถัดไป และ chapter สุดท้ายจะยาวไปจนจบวิดีโอ โดยไม่ใช้เวลาสิ้นสุดของ cue
• chapter ที่เริ่มต้นตั้งแต่เวลาจบของวิดีโอเป็นต้นไปจะไม่ถูกแสดง
• ชื่อ chapter เป็นข้อความธรรมดา แท็กใน cue จะถูกตัดออก
• player โหลดไฟล์ด้วย GET ธรรมดา เซิร์ฟเวอร์ของไฟล์จึงต้องอนุญาต origin ของหน้าเว็บผ่าน CORS

Methods

Method	Return	Description
player.chapters()	Array	chapter ทั้งหมดตามลำดับ ในรูปแบบ { startTime, endTime, title } (หน่วยเป็นวินาที) จะได้ [] เมื่อไม่มี chapter, โหลดไฟล์ไม่สำเร็จ หรือเป็นวิดีโอ live stream
player.currentChapter()	Object	chapter ณ เวลาที่กำลังเล่นอยู่ ในรูปแบบ { startTime, endTime, title } หรือ null เมื่อไม่มี

ถ้าต้องการข้ามไปยัง chapter ใด ให้เรียก player.currentTime(chapter.startTime)

Events

Event	Description
chapterschange	เกิดขึ้นเมื่อรายการ chapter ถูกโหลดหรือเปลี่ยนไป เช่น หลังจากเปลี่ยนวิดีโอ เรียก player.chapters() เพื่ออ่านรายการ
chapterchange	เกิดขึ้นเมื่อ chapter ที่กำลังเล่นเปลี่ยนไป จากการเล่น การ seek หรือรายการ chapter ใหม่ listener จะได้รับ (event, data) โดย data.chapter คือ chapter ใหม่ หรือ null โดยจะไม่เกิดขึ้นทุกครั้งที่เวลาเปลี่ยน

ตัวอย่าง

<!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>
      bytearkPlayer('video-player', {
        fluid: true,
        sources: [{
          title: 'Big Buck Bunny',
          src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
          type: 'application/x-mpegURL',
          chapters: {
            src: 'https://example.com/chapters/big-buck-bunny.vtt'
          }
        }]
      }, function () {
        var player = this;
        player.on('chapterschange', function () {
          console.log('Chapters:', player.chapters());
        });
        player.on('chapterchange', function (event, data) {
          console.log('Now playing:', data.chapter ? data.chapter.title : 'no chapter');
        });
      });
    </script>
  </body>
</html>

ข้อจำกัด

• วิดีโอ live stream จะไม่แสดง chapter รวมถึงแบบ DVR
• ชื่อ chapter ไม่ถูกแปลภาษา จะแสดงตามที่ระบุไว้