# วิธีการติดตั้ง ByteArk Lighthouse กับ Video.js Version 7

# วิธีการติดตั้ง

ใส่แท็กโหลดสคริปท์ของ ByteArk Lighthouse หลังจากแท็กโหลดสคริปท์ของ Video.js

<script type="text/javascript" src="https://vjs.zencdn.net/7.6.6/video.js"></script>
<script type="text/javascript" src="https://byteark-sdk.cdn.byteark.com/lighthouse/videojs/@latest/videojs-byteark-lighthouse.min.js"></script>

1
2

ทำการเซ็ตอัพ Video.js ตามปกติ

<script>
// Video.js Setup Code
var player = videojs('player', {
  sources: [{
    src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
    type: 'application/x-mpegURL',
  }]
  // All your remaining Video.js options
})
</script>

1
2
3
4
5
6
7
8
9
10

เพิ่มฟีลด์ poster และฟีลด์ใน source object เพื่อส่งข้อมูลรายละเอียดต่างๆ ของวิดีโอ มาแสดงใน ByteArk Lighthouse

<script>
// Video.js Setup Code
var player = videojs('player', {
  poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/H/7H6hEZrLH.png',
  sources: [{
    videoId: 'TZyZheqEJUwC',
    title: 'Big Buck Bunny',
    src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
    type: 'application/x-mpegURL',
  }]
  // All your remaining Video.js options
})
</script>
```****
**รายละเอียดของฟีลด์ข้อมูล**
| Name                   | Type   | Required | Description                         |
|------------------------|--------|----------|-------------------------------------|
| videoId                | String | Yes      | ไอดีของวิดีโอในระบบ ByteArk            |
| title                  | String | Yes      | ชื่อของวิดีโอ                           |
| subtitle               | String | No       | ชื่อตอน หรือรายละเอียดสั้นๆของวิดีโอ        |
| poster                 | String | No       | URL ของรูปภาพปกของวิดีโอที่แสดงก่อนเริ่มเล่น |
| lighthouse             | Object | No       | lighthouse object                   |
| lighthouse.user        | Object | No       | user object                         |
| lighthouse.user.userId | Object | No       | userId ที่ต้องการส่งข้อมูล                |

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

สามารถทำการเซ็ตอัพ ByteArk Lighthouse plugin ได้ 2 วิธี ดังนี้

4.1 เซ็ตอัพ plugin ผ่านออพชันของ Video.js

<script>
// Video.js Setup Code
var player = videojs('player', {
  poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/H/7H6hEZrLH.png',
  sources: [{
    videoId: 'TZyZheqEJUwC',
    title: 'Big Buck Bunny',
    src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8.m3u8',
    type: 'application/x-mpegURL',
    lighthouse: {
      user: {
        userId: 'YOUR_USER_ID',
      },
    },
  }],
  plugins:{
    bytearkLighthouse: {
      projectId: 'YOUR_PROJECT_ID',
      debug: true,
    },
  },
  // All your remaining Video.js options
})
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

4.2 เซ็ตอัพ plugin ด้วยการเรียกฟังก์ชัน

<script>
// Video.js Setup Code
var player = videojs('player', {
  poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/H/7H6hEZrLH.png',
  sources: [{
    videoId: 'TZyZheqEJUwC',
    title: 'Big Buck Bunny',
    src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
    type: 'application/x-mpegURL',
    lighthouse: {
      user: {
        userId: 'YOUR_USER_ID',
      },
    },
  }],
  // All your remaining Video.js options
})
// Setup ByteArk Lighthouse plugin
player.bytearkLighthouse({
  projectId: 'YOUR_PROJECT_ID',
  debug: true,
})
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

projectId ให้ระบุ project ID ที่ได้จากการสร้างในเว็บไซต์ ByteArk Lighthouse

ทดลองเปิดเว็บเพจแล้วเปิด Developer console หากเห็นข้อความลักษณะนี้แปลว่าสามารถติดตั้งได้ถูกต้อง
```
...
[LighthousePlayerPlugin] Init lighthouse plugin
...
```
1
2
3
นำออพชัน debug: true ออก

# การส่ง `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.videoId	String	No	ID ของวิดีโอ
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	เรตของวิดีโอ (เช่น PG-13)

รายละเอียด 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: 'TZyZheqEJUwC',
  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

# ตัวอย่างเว็บเพจที่ติดตั้ง ByteArk Lighthouse กับ Video.js

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ByteArk Lighthouse for Video.js</title>
  <link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
</head>
<body>
  <video id="player" class="video-js vjs-default-skin" controls playsinline />
  <script type="text/javascript" src="https://vjs.zencdn.net/7.6.6/video.js"></script>
  <script type="text/javascript" src="https://byteark-sdk.cdn.byteark.com/lighthouse/videojs/@latest/videojs-byteark-lighthouse.min.js"></script>
  <script>
    var player = videojs('player', {
      autoplay: true,
      fluid: true,
      poster: 'https://stream-image.byteark.com/image/video-cover-480p/7/H/7H6hEZrLH.png',
      sources: [{
        videoId: 'TZyZheqEJUwC',
        title: 'Big Buck Bunny',
        src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8.m3u8',
        type: 'application/x-mpegURL',
      }],
      plugins:{
        bytearkLighthouse: {
          projectId: 'YOUR_PROJECT_ID',
          debug: true,
        },
      },
      // All your remaining Video.js options
    })
  </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
29
30
31
32
33
34

← ติดตั้งกับ JWPlayer ข้อมูล Metadata →

# วิธีการติดตั้ง ByteArk Lighthouse กับ Video.js Version 7