# วิธีการติดตั้ง ByteArk Lighthouse กับ JWPlayer Version 8.x

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

ใส่แท็กโหลดสคริปท์ของ ByteArk Lighthouse คู่กับแท็กโหลดสคริปท์ของ JWPlayer

<script type="text/javascript" src="https://byteark-sdk.cdn.byteark.com/lighthouse/jwplayer/@latest/lighthouse-jwplayer-plugin.js"></script>
<script type="text/javascript" src="https://content.jwplatform.com/libraries/AbnQ478C.js"></script>

1
2

ใช้โค้ดเซ็ตอัพ JWPlayer ตามปกติ แต่ให้สร้าง URL ของวิดีโอใหม่ ผ่านฟังก์ชัน ByteArkLighthouse.createMediaUrl แทน โดยส่งพารามิเตอร์เป็น URL ของวิดีโอเดิม
```
<script>
// JWPlayer Setup Code
var player = jwplayer('video-player').setup({
  playlist: [
    {
      file: window.ByteArkLighthouse.createMediaUrl('//inox.qoder.byteark.com/video-objects/QObeO02cMYWl/playlist.m3u8'),
    },
  ],
  // All your remaining JWPlayer options
})
</script>
```
1
2
3
4
5
6
7
8
9
10
11

เพิ่มฟังก์ชันคอลแบค onXhrOpen และใส่โค้ด injectXhr เพื่อเก็บสถิติการโหลดไฟล์วิดีโอ

{
  file: window.ByteArkLighthouse.createMediaUrl('//inox.qoder.byteark.com/video-objects/QObeO02cMYWl/playlist.m3u8'),
  onXhrOpen: function(xhr, url) {
    window.ByteArkLighthouse.injectXhr(xhr, url)
  },
},

1
2
3
4
5
6

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

{
  file: window.ByteArkLighthouse.createMediaUrl('//inox.qoder.byteark.com/video-objects/QObeO02cMYWl/playlist.m3u8'),
  onXhrOpen: function(xhr, url) {
    window.ByteArkLighthouse.injectXhr(xhr, url)
  },
  bytearkLighthouse: {
    videoId: 'QObeO02cMYWl',
    title: 'Big Buck Bunny',
    subtitle: 'sample video',
    coverImageUrl: '//qoder.byteark.com/images/video-frames/1/GU/cg/1GUcghrocmlz-large.jpg',
  },
},

1
2
3
4
5
6
7
8
9
10
11
12

รายละเอียดของฟีลด์ข้อมูล

Name	Type	Required	Description
videoId	String	Yes	ไอดีของวิดีโอในระบบ ByteArk
title	String	Yes	ชื่อของวิดีโอ
subtitle	String	No	ชื่อตอน หรือรายละเอียดสั้นๆของวิดีโอ
coverImageUrl	String	No	URL ของรูปภาพปกของวิดีโอที่แสดงก่อนเริ่มเล่น

เพิ่มสคริปท์เพื่อเซ็ตอัพ ByteArk Lighthouse หลังจากโค้ดเซ็ตอัพของ JWPlayer โดยระบุ
- player ให้ส่ง player instance ของ JWPlayer ที่ได้จากข้อ 2
- options ระบุดังนี้:
  - projectId ให้ระบุ project ID ที่ได้จากการสร้างในเว็บไซต์ ByteArk Lighthouse
```
<script>
window.ByteArkLighthouse.init(player, {
  projectId: 'YOUR_PROJECT_ID',
  debug: true,
})
</script>
```
1
2
3
4
5
6
ทดลองเปิดเว็บเพจแล้วเปิด Developer console หากเห็นข้อความลักษณะนี้แปลว่าสามารถติดตั้งได้ถูกต้อง
```
...
[LighthouseJWPlayerPlugin] Init lighthouse jwplayer plugin
...
```
1
2
3
นำออพชัน debug: true ออก

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

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ByteArk Lighthouse for JWPlayer</title>
</head>
<body>
  <div id="video-player"></div>
  <script type="text/javascript" src="https://byteark-sdk.cdn.byteark.com/lighthouse/jwplayer/@latest/lighthouse-jwplayer-plugin.js"></script>
  <script type="text/javascript" src="https://content.jwplatform.com/libraries/AbnQ478C.js"></script>
  <script>
    var player = jwplayer('video-player').setup({
      playlist: [
        {
          file: window.ByteArkLighthouse.createMediaUrl('//inox.qoder.byteark.com/video-objects/QObeO02cMYWl/playlist.m3u8'),
          onXhrOpen: function(xhr, url) {
            window.ByteArkLighthouse.injectXhr(xhr, url)
          },
          bytearkLighthouse: {
            videoId: 'QObeO02cMYWl',
            title: 'Big Buck Bunny',
            subtitle: 'sample video',
            coverImageUrl: '//qoder.byteark.com/images/video-frames/1/GU/cg/1GUcghrocmlz-large.jpg',
          },
        },
      ],
      hlshtml: true,
      autostart: true,
      width: '640',
      aspectratio: '16:9',
      allowfullscreen: true
    })
    window.ByteArkLighthouse.init(player, {
      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
29
30
31
32
33
34
35
36
37
38
39

← ติดตั้งกับ ByteArk Player ติดตั้งกับ Video.js →