ByteArk Lighthouse

ByteArk Player รองรับการเชื่อมต่อกับระบบ ByteArk Lighthouse เพื่อเก็บข้อมูลสถิติการรับชมวิดีโอจากทางฝั่ง Client-side ซึ่งจะทำให้ได้ข้อมูลสถิติ และ พฤติกรรมการดูวิดีโอที่ละเอียดขึ้น

การเปิดใช้งาน ByteArk Lighthouse Plugin

1. การเปิดใช้งาน ByteArk Lighthouse Plugin บน ByteArk Player สามารถทำได้โดยระบุ plugins.bytearkLighthouse ใน options เมื่อทำการสร้าง video player โดยสามารถตั้งค่าพารามิเตอร์ต่างๆ ตามตาราง options ด้านล่าง

{
  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/TZyG96KZ1Wgx/playlist.m3u8',
    type: 'application/x-mpegURL'
  }],
  plugins: {
    bytearkLighthouse: {
      // TODO: add your options here
    }
  }
}

2. ระบุ projectId ที่ได้จากการสร้างในเว็บไซต์ ByteArk Lighthouse และ debug: true เพื่อแสดง debug log สำหรับการตั้งค่าในครั้งแรก

...
plugins: {
  bytearkLighthouse: {
    projectId: 'YOUR_PROJECT_ID',
    debug: true
  }
}
...

3. เพิ่มฟีลด์ใน sources object เพื่อส่งรายละเอียดต่างๆของวิดีโอ มาแสดงใน ByteArk Lighthouse โดย ฟีลด์ ที่จำเป็นคือ videoId และ title

...
sources: [{
  title: 'Big Buck Bunny',
  src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyG96KZ1Wgx/playlist.m3u8',
  type: 'application/x-mpegURL',
  videoId: 'QObeO02cMYWl',
  poster: '/assets/samples/player/images/poster-big-buck-bunny.jpg'
}],
...

4. ทดลองเปิดเว็บเพจแล้วเปิด Developer console หากเห็นข้อความลักษณะนี้แปลว่าสามารถติดตั้งได้ถูกต้อง

[LighthousePlayerPlugin] Init lighthouse plugin

5. นำ debug: true ออก เมื่อเริ่มใช้งานใน production

การส่ง metadata เข้าสู่ระบบของ ByteArk Lighthouse

สามารถส่ง metadata ต่างๆเข้าสู่ระบบของ ByteArk Lighthouse ได้โดยการเพิ่มฟีลด์ lighthouse object เข้าไปใน sources object

ค่า metadata ต่างๆที่ ByteArk Lighthouse รองรับ

รายละเอียด metadata ส่วนของผู้ใช้

Name	Type	Required	Description
user	object	No	Metadata object ของผู้ใช้
user.userId	String	No	ID ของผู้ใช้งาน
user.age	String	No	อายุของผู้ใช้งาน
user.country	String	No	ประเทศของผู้ใช้งาน
user.city	String	No	เมือง / จังหวัดของผู้ใช้งาน
user.lat	String	No	ละติจูดของผู้ใช้งาน
user.long	String	No	ลองจิจูดของผู้ใช้งาน
user.gender	String	No	เพศของผู้ใช้งาน
user.nationality	String	No	สัญชาติของผู้ใช้งาน
user.subscriptionPlan	String	No	แพลน subscription ของผู้ใช้งาน
user.accountCreationDate	String	No	วันที่แอคเคานท์ของผู้ใช้งานถูกสร้าง

รายละเอียด metadata ส่วนของวิดีโอ

Name	Type	Required	Description
video	object	No	Metadata object ของวิดีโอ
video.videoTitle	String	No	ชื่อวิดีโอ
video.seriesId	String	No	ID ของซีรี่ย์
video.seriesTitle	String	No	ชื่อซีรี่ย์ของวิดีโอ
video.season	String	No	ซีซั่นของวิดีโอ
video.episode	String	No	episode ของวิดีโอ
video.subEpisode	String	No	episode ย่อย
video.duration	String	No	ความยาวของวิดีโอ
video.publishedDate	String	No	เวลาที่วิดีโอถูกเผยแพร่
video.genres	String	No	ประเภทของวิดีโอ
video.rating	String	No	เรตของวิดีโอ

รายละเอียด custom metadata

Name	Type	Required	Description
custom	object	No	Metadata object ของ custom metadata
custom.d1	String	No	custom metadata ตัวที่​ 1 ที่ต้องการส่งข้อมูล
custom.d2	String	No	custom metadata ตัวที่​ 2 ที่ต้องการส่งข้อมูล
custom.d3	String	No	custom metadata ตัวที่​ 3 ที่ต้องการส่งข้อมูล
custom.d4	String	No	custom metadata ตัวที่​ 4 ที่ต้องการส่งข้อมูล
custom.d5	String	No	custom metadata ตัวที่​ 5 ที่ต้องการส่งข้อมูล
custom.d6	String	No	custom metadata ตัวที่​ 6 ที่ต้องการส่งข้อมูล
custom.d7	String	No	custom metadata ตัวที่​ 7 ที่ต้องการส่งข้อมูล
custom.d8	String	No	custom metadata ตัวที่​ 8 ที่ต้องการส่งข้อมูล
custom.d9	String	No	custom metadata ตัวที่​ 9 ที่ต้องการส่งข้อมูล
custom.d10	String	No	custom metadata ตัวที่​ 10 ที่ต้องการส่งข้อมูล

ตัวอย่างการตั้งค่า source object เพื่อส่ง metadata

...
sources: [{
  title: 'Big Buck Bunny',
  src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyG96KZ1Wgx/playlist.m3u8',
  type: 'application/x-mpegURL',
  videoId: 'QObeO02cMYWl',
  poster: '/assets/samples/player/images/poster-big-buck-bunny.jpg',
  lighthouse: {
    user: {
      userId: 'YOUR_USER_ID',
      age: '19',
      gender: 'USER_GENDER',
    },
    video: {
      videoTitle: 'VIDEO_TITLE',
      season: '2',
      episode: '12'
    },
    custom: {
      d1: 'CUSTOM_HEADER_1',
      d2: 'CUSTOM_HEADER_2'
    }
  }
}],
...

การเปิดใช้งานให้ Player ขึ้น Playback Id ในกรณีที่ตัว Player อยู่ในสถาณะกำลังโหลดนานเกินกว่าที่กำหนดไว้

ปรับสถานะ playbackStuckUi เป็น on ด้วยการเพิ่ม playbackStuckUi: 'on' ในตัว options ของ bytearkLighthouse

const options = {
  ...
  bytearkLighthouse: {
    playbackStuckUi: 'on',
      ...
  }
}

ตัวอย่าง player ขณะที่ติดอยู่ในสถาณะกำลังโหลดนานเกินกว่าที่กำหนด

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

Name	Type	Required	Default Value	Description
debug	Boolean	No	false	เปิด/ปิด debug
projectId	String	Yes	-	Project ID ที่ได้จากการสร้างในเว็บไซต์ ByteArk Lighthouse
playbackStuckUi	'on', 'off' หรือ 'auto'	No	'auto'	เปิด/ปิด Playback id label ที่จะขึ้นในขณะที่ player ติดอยู่ในสถานะกำลังโหลดนานเกินกว่าช่วงเวลาที่กำหนด
checkPlaybackStuckTimeInterval	Number	No	3000	ปรับช่วงเวลาสำหรับการเช็คสถานะกำลังโหลดของ player (หน่วย milliseconds)

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

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="the-video-player"></div>
    <script src="https://byteark-sdk.cdn.byteark.com/player/v2/byteark-player.min.js"></script>
    <script>
      var player = bytearkPlayer('the-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/TZyG96KZ1Wgx/playlist.m3u8',
          type: 'application/x-mpegURL',
          videoId: 'QObeO02cMYWl',
          poster: '/assets/samples/player/images/poster-big-buck-bunny.jpg',
        }],
        plugins: {
          bytearkLighthouse: {
            projectId: 'YOUR_PROJECT_ID',
          }
        }
      });
    </script>
  </body>
</html>