คู่มือแนะนำการใช้งาน ByteArk

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

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

  1. ใส่แท็กโหลดสคริปท์ของ 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

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

    <script>
// Video.js Setup Code
var player = videojs('player', {
  sources: [{
    src: '//inox.qoder.byteark.com/video-objects/QObeO02cMYWl/playlist.m3u8',
    type: 'application/x-mpegURL',
  }]
  // All your remaining Video.js options
})
</script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

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

    <script>
// Video.js Setup Code
var player = videojs('player', {
  poster: '//qoder.byteark.com/images/video-frames/1/GU/cg/1GUcghrocmlz-large.jpg',
  sources: [{
    videoId: 'QObeO02cMYWl',
    title: 'Big Buck Bunny',
    subtitle: 'sample video',
    src: '//inox.qoder.byteark.com/video-objects/QObeO02cMYWl/playlist.m3u8',
    type: 'application/x-mpegURL',
  }]
  // All your remaining Video.js options
})
</script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

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

    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 ที่ต้องการส่งข้อมูล

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

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

    <script>
// Video.js Setup Code
var player = videojs('player', {
  poster: '//qoder.byteark.com/images/video-frames/1/GU/cg/1GUcghrocmlz-large.jpg',
  sources: [{
    videoId: 'QObeO02cMYWl',
    title: 'Big Buck Bunny',
    subtitle: 'sample video',
    src: '//inox.qoder.byteark.com/video-objects/QObeO02cMYWl/playlist.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
    25

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

    <script>
// Video.js Setup Code
var player = videojs('player', {
  poster: '//qoder.byteark.com/images/video-frames/1/GU/cg/1GUcghrocmlz-large.jpg',
  sources: [{
    videoId: 'QObeO02cMYWl',
    title: 'Big Buck Bunny',
    subtitle: 'sample video',
    src: '//inox.qoder.byteark.com/video-objects/QObeO02cMYWl/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
    25

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

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

    ...
[LighthousePlayerPlugin] Init lighthouse plugin
...
    1
    2
    3

  6. นำออพชัน 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.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'
    }
  }
}],
...
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: '//qoder.byteark.com/images/video-frames/1/GU/cg/1GUcghrocmlz-large.jpg',
      sources: [{
        videoId: 'QObeO02cMYWl',
        title: 'Big Buck Bunny',
        subtitle: 'sample video',
        src: '//inox.qoder.byteark.com/video-objects/QObeO02cMYWl/playlist.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
35

← ติดตั้งกับ Video.js และ React.js →

Pricing Contact Terms of Service