# ByteArk Lighthouse
ByteArk Player รองรับการเชื่อมต่อกับระบบ ByteArk Lighthouse เพื่อเก็บข้อมูลสถิติการรับชมวิดีโอจากทางฝั่ง Client-side ซึ่งจะทำให้ได้ข้อมูลสถิติ และ พฤติกรรมการดูวิดีโอที่ละเอียดขึ้น
# การเปิดใช้งาน ByteArk Lighthouse Plugin
- การเปิดใช้งาน 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
2
3
4
5
6
7
8
9
10
11
12
13
14
- ระบุ
projectId
ที่ได้จากการสร้างในเว็บไซต์ ByteArk Lighthouse และdebug: true
เพื่อแสดง debug log สำหรับการตั้งค่าในครั้งแรก
...
plugins: {
bytearkLighthouse: {
projectId: 'YOUR_PROJECT_ID',
debug: true
}
}
...
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- เพิ่มฟีลด์ใน 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
2
3
4
5
6
7
8
9
- ทดลองเปิดเว็บเพจแล้วเปิด Developer console หากเห็นข้อความลักษณะนี้แปลว่าสามารถติดตั้งได้ถูกต้อง
[LighthousePlayerPlugin] Init lighthouse plugin
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
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
2
3
4
5
6
7
ตัวอย่าง 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="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
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