# 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/TZyZheqEJUwC/playlist.m3u8',
    type: 'application/x-mpegURL'
  }],
  plugins: {
    bytearkLighthouse: {
      // TODO: add your options here
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  1. ระบุ projectId ที่ได้จากการสร้างในเว็บไซต์ ByteArk Lighthouse และ debug: true เพื่อแสดง debug log สำหรับการตั้งค่าในครั้งแรก
...
plugins: {
  bytearkLighthouse: {
    projectId: 'YOUR_PROJECT_ID',
    debug: true
  }
}
...
1
2
3
4
5
6
7
8
  1. เพิ่มฟีลด์ใน sources object เพื่อส่งรายละเอียดต่างๆของวิดีโอ มาแสดงใน ByteArk Lighthouse โดย ฟีลด์ ที่จำเป็นคือ videoId และ title
...
sources: [{
  title: 'Big Buck Bunny',
  src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
  type: 'application/x-mpegURL',
  videoId: 'QObeO02cMYWl',
  poster: '/assets/samples/player/images/poster-big-buck-bunny.jpg'
}],
...
1
2
3
4
5
6
7
8
9
  1. ทดลองเปิดเว็บเพจแล้วเปิด Developer console หากเห็นข้อความลักษณะนี้แปลว่าสามารถติดตั้งได้ถูกต้อง
[LighthousePlayerPlugin] Init lighthouse plugin
1
  1. นำ 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/TZyZheqEJUwC/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'
    }
  }
}],
...
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

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

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

const options = {
  ...
  bytearkLighthouse: {
    playbackStuckUi: 'on',
      ...
  }
}
1
2
3
4
5
6
7

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

Player with playback id label

# การปรับตั้งค่า 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="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',
          videoId: 'QObeO02cMYWl',
          poster: '/assets/samples/player/images/poster-big-buck-bunny.jpg',
        }],
        plugins: {
          bytearkLighthouse: {
            projectId: 'YOUR_PROJECT_ID',
          }
        }
      });
    </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