คำบรรยาย (Subtitles)

ByteArk Player แสดงคำบรรยายจาก manifest ของวิดีโอแบบ HLS หรือ DASH และผู้ชมสามารถเลือกภาษาได้จากเมนูตั้งค่า → Subtitles/CC หน้านี้อธิบาย 2 วิธีในการควบคุมการแสดงผลคำบรรยาย

• คำบรรยายแบบเลื่อน (Rolling captions) แสดงคำบรรยายซ้อนกัน 2 บรรทัดแบบเลื่อนขึ้น
• การซ่อนและแสดงคำบรรยาย ให้หน้าเว็บซ่อนคำบรรยายบนจอได้ โดยไม่เปลี่ยนคำบรรยายที่เลือกไว้

ถ้าต้องการแสดงปุ่มคำบรรยายบน control bar ให้ตั้งค่า closedCaptionButton: true ดูเพิ่มเติมได้ที่ การปรับตั้งค่า Options

คำบรรยายแบบเลื่อน (Rolling captions)

เมื่อเปิดใช้งาน player จะแสดงคำบรรยายซ้อนกัน 2 บรรทัดแทนการแสดงทีละบรรทัด เมื่อมีบรรทัดใหม่ บรรทัดก่อนหน้าจะเลื่อนขึ้นและจางลง ผู้ชมที่อ่านไม่ทันจึงยังอ่านบรรทัดก่อนหน้าได้ ช่วงแรกของการเล่นจะแสดงเพียง 1 บรรทัด และเพิ่มเป็น 2 บรรทัดเมื่อมีบทพูดต่อเนื่อง

ตัวอย่างนี้เปิดคำบรรยายภาษาอังกฤษไว้ เลือกภาษาอื่นได้จากปุ่ม CC หรือเมนูตั้งค่า → Subtitles/CC

การตั้งค่า

Name	Type	Default	Description
subtitleAnimation	Object	-	การตั้งค่าคำบรรยายแบบเลื่อน
subtitleAnimation.enabled	Boolean	false	เปิดใช้งานคำบรรยายแบบเลื่อน
subtitleAnimation.idleClearMs	Number	5000	ระยะเวลา (มิลลิวินาที) ที่คำบรรยายยังแสดงอยู่หลังจากไม่มีบทพูดแล้ว ก่อนจะหายไป โดยจะนับเวลาเฉพาะช่วงที่ไม่มีบทพูด และหยุดนับเมื่อหยุดวิดีโอ ต้องมีค่าตั้งแต่ 0 ถึง 2147483647 ถ้าระบุค่าอื่นจะใช้ค่าเริ่มต้นแทนและแสดงคำเตือนใน console
subtitleAnimation.historyOpacity	Number	0.7	ความทึบของบรรทัดก่อนหน้าที่จางลง มีค่าตั้งแต่ 0.6 ถึง 1 ถ้าต่ำกว่า 0.6 จะถูกปรับเป็น 0.6 เพื่อให้ยังอ่านได้ และถ้าสูงกว่า 1 จะถูกปรับเป็น 1 โดยแสดงคำเตือนใน console

player จะอ่านค่าเหล่านี้เพียงครั้งเดียวตอนสร้าง player การเปลี่ยนค่าภายหลังจะไม่มีผล

<!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,
        closedCaptionButton: true,
        subtitleAnimation: {
          enabled: true,
          idleClearMs: 5000,
          historyOpacity: 0.7
        },
        sources: [{
          title: 'Subtitle sample',
          src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZhhLbiVxG/playlist.m3u8',
          type: 'application/x-mpegURL'
        }]
      });
    </script>
  </body>
</html>

ก่อนเปิดใช้งาน

• ถ้าคำบรรยายของคุณใช้การกำหนดตำแหน่งของ WebVTT ไม่ควรเปิดใช้งาน คำบรรยายแบบเลื่อนจะแสดงอยู่ด้านล่างเสมอ และไม่รองรับ line, position, align, size, vertical หรือ region คำบรรยายที่วางไว้ด้านบนของภาพ เช่น เพื่อหลบกราฟิกบนจอ จะถูกย้ายมาด้านล่าง
• บน Safari และ iOS การตั้งค่าคำบรรยายของระบบจะไม่มีผล คำบรรยายของเบราว์เซอร์ใช้การตั้งค่าจาก Settings → Accessibility → Subtitles & Captioning แต่คำบรรยายแบบเลื่อนไม่ได้ใช้ ถ้าผู้ชมของคุณใช้การตั้งค่าเหล่านี้ ไม่ควรเปิดใช้งาน

สิ่งที่เปลี่ยนไปเมื่อเปิดใช้งาน

• ขนาดตัวอักษรเปลี่ยนตามขนาด player ประมาณ 5% ของความสูง player
• คำบรรยายยังแสดงอยู่หลังเวลาสิ้นสุด จนกว่าจะมีบรรทัดถัดไปมาแทน หรือจนกว่าจะไม่มีบทพูดนานเกิน idleClearMs
• พื้นที่คำบรรยายสูงขึ้น ตั้งแต่ 1 ถึง 4 บรรทัด บรรทัดที่ยาวจะขึ้นบรรทัดใหม่โดยไม่ถูกตัด
• คำบรรยายจะเริ่มใหม่ เมื่อ seek, เปลี่ยนภาษาคำบรรยาย, ปิดแล้วเปิดคำบรรยาย, เปลี่ยนวิดีโอหรือรายการใน playlist, เริ่มโฆษณา และเมื่อเล่นจบ การหยุดวิดีโอชั่วคราวจะไม่ทำให้เริ่มใหม่
• รองรับการลดการเคลื่อนไหว ผู้ชมที่เปิดการตั้งค่าลดการเคลื่อนไหว (reduce motion) ของระบบ จะยังเห็นคำบรรยาย 2 บรรทัดและบรรทัดที่จางลง แต่จะไม่มีการเลื่อน
• Picture-in-Picture, การเต็มจอแบบ native บน iPhone, AirPlay และ Chromecast จะแสดงคำบรรยายของเบราว์เซอร์แทน และกลับมาเป็นคำบรรยายแบบเลื่อนเมื่อผู้ชมกลับมาที่หน้าเว็บ

การซ่อนและแสดงคำบรรยาย

ซ่อนคำบรรยายบนจอได้โดยไม่เปลี่ยนอย่างอื่น จะหายไปเฉพาะคำบรรยายที่แสดงบนจอ ผู้ชมยังเลือกคำบรรยายจากเมนูได้ และ event ของคำบรรยายยังเกิดขึ้นตามปกติ เมื่อเริ่มต้น player จะแสดงคำบรรยายเสมอ

Methods

เรียกใช้ได้เมื่อ player พร้อมใช้งานแล้ว คือใน ready callback ของ bytearkPlayer(id, options, ready) หรือหลังจากนั้น ถ้าเรียกก่อนจะเกิด error TypeError: player.hideSubtitleDisplay is not a function

Method	Return	Description
player.hideSubtitleDisplay()	-	ซ่อนคำบรรยายบนจอ
player.showSubtitleDisplay()	-	แสดงคำบรรยายอีกครั้ง คำบรรยาย ณ เวลานั้นจะกลับมาแสดงทันที
player.isSubtitleDisplayVisible()	Boolean	true ถ้ายังไม่ได้ซ่อนคำบรรยาย

Events

Event	Description
subtitledisplaychange	เกิดขึ้นเมื่อซ่อนหรือแสดงคำบรรยาย โดย event.visible คือสถานะใหม่ ถ้าเรียกซ่อนตอนที่ซ่อนอยู่แล้ว หรือเรียกแสดงตอนที่แสดงอยู่แล้ว จะไม่มีอะไรเกิดขึ้นและไม่เกิด event