ลายน้ำ (Watermark)

Note

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

ByteArk Player SDK for Web รองรับการแสดงลายน้ำแบบข้อความ (Watermark) ทับบนวิดีโอ เพื่อระบุตัวผู้ชมแต่ละคน โดยลายน้ำจะแสดงขึ้นเป็นช่วงๆ ที่ตำแหน่งสุ่มบนพื้นที่ของ Player ทำให้ภาพถ่ายหน้าจอหรือวิดีโอที่อัดหน้าจอมีข้อความนี้ติดอยู่ และสามารถใช้สืบย้อนกลับไปยังผู้ชมที่เป็นต้นทางของการรั่วไหลได้

ลายน้ำนี้เป็นมาตรการ ป้องปราม (Deterrent) ไม่ใช่ DRM เนื่องจากทำงานเป็น Overlay แสดงผลข้อความดังนั้นหากต้องการการป้องกันเนื้อหาในระดับการเข้ารหัสและควบคุมสิทธิ์ สามารถดูข้อมูลเกี่ยวกับ DRM เพิ่มเติมได้ที่หัวข้อ Google Widevine และ Apple FairPlay

การแสดงผลลายน้ำ

Note

ตัวอย่างด้านบนตั้งค่า interval และ displayDuration ให้สั้นกว่าค่าเริ่มต้น เพื่อให้เห็นการแสดงลายน้ำได้เร็วขึ้น

ลายน้ำจะแสดงขึ้นช่วงสั้นๆ ที่ตำแหน่งสุ่มบนพื้นที่ของ Player แล้วซ่อนตัวลง และวนกลับมาแสดงใหม่ที่ตำแหน่งสุ่มใหม่เรื่อยๆ โดยกำหนดระยะเวลาที่แสดงและที่ซ่อนได้ด้วย displayDuration และ interval

เมื่อผู้ชมกดหยุดวิดีโอชั่วคราว (Pause) ระหว่างเล่น ลายน้ำจะ ค้างแสดงไว้ตลอดช่วงที่หยุด และจะกลับไปแสดงเป็นช่วงๆ ตามปกติเมื่อเล่นวิดีโอต่อ

การเปิดใช้งานลายน้ำบน ByteArk Player

การเปิดใช้งานลายน้ำบน ByteArk Player สามารถทำได้โดยระบุ plugins.bytearkWatermark ใน options เมื่อทำการสร้าง video player พร้อมระบุ text ซึ่งเป็นข้อความที่ต้องการแสดง

var player = bytearkPlayer('video-player', {
  sources: [
    // source object
  ],
  plugins: {
    bytearkWatermark: {
      text: '<YOUR_VIEWER_IDENTIFIER>'
    }
  }
});

ค่าทั้งหมดใน options รวมถึง text กำหนดได้เฉพาะตอนสร้าง Player และเปลี่ยนภายหลังไม่ได้ หากข้อความที่ใช้ระบุตัวผู้ชมต้องรอผลจากขั้นตอนอื่น เช่น การ Login ให้รอจนได้ค่าดังกล่าวก่อน แล้วจึงสร้าง Player

การตั้งค่า

Name	Type	Required	Default Value	Description
text	String	Yes	-	ข้อความที่ใช้เป็นลายน้ำ แสดงตามที่ระบุ ไม่รองรับการใช้ Template หรือตัวแปร
color	String	No	'#ffffff'	สีของข้อความ (CSS color)
opacity	Number	No	0.35	ความทึบแสงของลายน้ำ มีค่าระหว่าง 0 ถึง 1
fontSize	Number	No	48	ขนาดตัวอักษรสูงสุดในหน่วย px โดยลายน้ำจะปรับขนาดตามความกว้างของ Player ไม่เกินค่านี้
fontFamily	String	No	'inherit'	ฟอนต์ของข้อความ (CSS font-family)
fontWeight	Number|String	No	'inherit'	ความหนาของข้อความ (CSS font-weight)
textShadow	Boolean	No	true	ใส่เงาจางๆ ให้ข้อความ เพื่อให้อ่านออกบนภาพวิดีโอทุกแบบ
interval	Number	No	30000	ระยะเวลาที่ซ่อนลายน้ำระหว่างการแสดงแต่ละครั้ง ในหน่วยมิลลิวินาที
displayDuration	Number	No	10000	ระยะเวลาที่แสดงลายน้ำในแต่ละครั้ง ในหน่วยมิลลิวินาที
showWhenPaused	Boolean	No	true	ค้างแสดงลายน้ำไว้ตลอดช่วงที่ผู้ชมหยุดวิดีโอชั่วคราว ตั้งเป็น false เพื่อให้แสดงเป็นช่วงๆ ตามรอบเดิมโดยไม่สนใจการ Pause
maxWidthPercent	Number	No	80	ความกว้างสูงสุดของลายน้ำ คิดเป็นเปอร์เซ็นต์ของความกว้าง Player ก่อนที่ข้อความจะตัดขึ้นบรรทัดที่สอง มีค่ามากกว่า 0 และไม่เกิน 100

ขนาดตัวอักษรและการตัดบรรทัด

ขนาดตัวอักษรของลายน้ำจะปรับตามความกว้างของ Player โดยไม่เกินค่า fontSize และไม่เล็กกว่าขนาดที่ยังอ่านออก ทำให้ลายน้ำอ่านได้บน Player ขนาดใหญ่ และไม่ใหญ่เกินไปบน Player ขนาดเล็ก ข้อความที่ยาว เช่น อีเมล จะถูกตัดขึ้นบรรทัดที่สองแทนการตัดข้อความทิ้ง เพื่อให้ข้อความที่ใช้ระบุตัวผู้ชมยังครบถ้วน

ในกรณีที่ Player มีขนาดเล็กมากจนไม่สามารถแสดงลายน้ำที่ขนาดอ่านออกได้ ลายน้ำจะถูกย่อให้เล็กกว่าขนาดดังกล่าว เพื่อให้ข้อความทั้งหมดยังอยู่ในกรอบของ Player

ผลกระทบต่อ Picture-in-Picture และการแสดงผลเต็มจอ

เพื่อความปลอดภัย เมื่อเปิดใช้ Plugin ลายน้ำนี้ ByteArk Player จำเป็นต้องปรับพฤติกรรมต่อไปนี้ให้อัตโนมัติ

พฤติกรรม	ผลที่เกิดขึ้น
Picture-in-Picture	ปิดการใช้งาน และซ่อนปุ่ม Picture-in-Picture บน Control Bar
การแสดงผลเต็มจอบน iOS และ iPadOS	ใช้การขยายเต็มหน้าต่างด้วย CSS (Full-window) แทน Native fullscreen เพื่อให้ลายน้ำยังแสดงอยู่
การแสดงผลเต็มจอบน Desktop และ Android	ใช้ Native fullscreen ตามปกติ ลายน้ำยังแสดงอยู่

ข้อจำกัด

พื้นที่การแสดงผล	ลายน้ำ	หมายเหตุ
Desktop, Android, iPad แบบ inline	แสดง	กรณีใช้งานทั่วไป
Desktop, Android, iPad โหมดเต็มจอ	แสดง	Player ยังอยู่ในหน้าเว็บ
iPhone โหมดเต็มจอ	แสดง	ผ่านการขยายเต็มหน้าต่างด้วย CSS (Full-window)
Picture-in-Picture	ไม่แสดง	ระบบปฏิบัติการแสดงเฉพาะภาพวิดีโอ (ByteArk Player ปิดการใช้งานให้โดยค่าเริ่มต้น)
การแคสต์ผ่าน Google Chromecast หรือ Apple AirPlay	ไม่แสดง	อุปกรณ์ปลายทางเล่นไฟล์วิดีโอโดยตรง ไม่ได้รับข้อมูลจากหน้าเว็บต้นทาง

ข้อควรระวังด้านความปลอดภัยและความเป็นส่วนตัว

ข้อควรระวัง

ข้อความที่คุณตั้งใน text จะปรากฏบนหน้าจอให้ทุกคนที่อยู่หน้าจอนั้นมองเห็น และเป็นสิ่งแรกที่ผู้ที่ต้องการนำเนื้อหาไปเผยแพร่จะพยายามตัดออก จึงควรใช้ รหัสอ้างอิงของผู้ชมหรือของ Session ที่นำไปเทียบกลับเป็นบัญชีผู้ใช้ในระบบของคุณได้ แทนการใช้ข้อมูลส่วนบุคคลโดยตรง

การจัดเก็บความสัมพันธ์ระหว่าง Session กับข้อความลายน้ำ รวมถึงหน้าที่ตามกฎหมายคุ้มครองข้อมูลส่วนบุคคล (PDPA) จากการแสดงข้อความดังกล่าว เป็นความรับผิดชอบของผู้นำไปใช้งาน

ตัวอย่าง

<!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: {
          bytearkWatermark: {
            text: '<YOUR_VIEWER_IDENTIFIER>',
            opacity: 0.4,
            fontSize: 40,
            interval: 30000,
            displayDuration: 10000
          }
        }
      });
    </script>
  </body>
</html>