วิธีการติดตั้ง ByteArk Lighthouse กับ Hls.js

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

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

   <script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
   <script src="https://byteark-sdk.cdn.byteark.com/lighthouse/hlsjs/@latest/lighthouse-hlsjs-plugin.min.js"></script>
   

2. สร้าง <video> element

   <div class="video-container">
     <video id="video" autoplay muted controls></video>
   </div>
   

3. ทำการเซ็ตอัพ Hls.js และ ByteArk Lighthouse

   <script>
     var video = document.getElementById('video');
     var videoSrc =
       'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8';
     // create Hls.js instance
     var hls = new Hls();
     // create lighthouse plugin config
     var lighthouseConfig = {
       debug: true,
       projectId: 'YOUR_PROJECT_ID',
       // optional set Hls.js version
       hlsjsVersion: Hls.version,
       // optional set metadata
       metadata: {
         user: {
           userId: "YOUR_USER_ID",
         },
         video: {
           videoId: 'TZyZheqEJUwC',
           videoTitle: 'Big Buck Bunny',
         },
       },
     }
     // create Lighthouse Plugin instance
     var lighthouse = new LighthousePlugin(video, hls, lighthouseConfig);
     // load video source url
     hls.loadSource(videoSrc);
     // attach video element to Hls.js instance
     hls.attachMedia(video);
   </script>
   

Note

projectId ให้ระบุ project ID ที่ได้จากทาง ByteArk

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

   ...
   [LighthousePlugin] Init Lighthouse SDK for hls.js
   ...
   

5. นำออพชัน debug: true ออก

การส่งข้อมูลใหม่เมื่อมีการเปลี่ยนวิดีโอ

เมื่อมีการเปลี่ยน video url ให้ทำการเรียก destroy() method ของ Lighthouse Plugin instance เพื่อเคลียร์ข้อมูล และทำการสร้าง Lighthouse Plugin instance ใหม่ สำหรับใช้กับวิดีโอใหม่ทุกครั้ง

สามารถดูตัวอย่างการใช้งานได้ที่ ตัวอย่างเว็บเพจที่ติดตั้ง ByteArk Lighthouse กับ Hls.js

การปรับตั้งค่า options

Name	Type	Required	Default Value	Description
debug	Boolean	No	false	เปิด/ปิด debug
projectId	String	Yes	-	projectId ที่ได้จากทาง ByteArk
hlsjsVersion	String	No	-	version ของ Hls.js ที่ใช้งาน
metadata	Object	No	-	Metadata object ที่สามารถส่งข้อมูลเข้าสู่ระบบของ ByteArk Lighthouse
metadata.user	Object	No	-	User Metadata Object
metadata.video	Object	No	-	Video Metadata Object
metadata.custom	Object	No	-	Custom Metadata Object

User Metadata Object

Name	Type	Required	Description
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	วันที่แอคเคานท์ของผู้ใช้งานถูกสร้าง

Video Metadata Object

Name	Type	Required	Description
video.videoId	String	No	ไอดีของวิดีโอ
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 Object

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

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

สามารถดูตัวอย่างการติดตั้ง ByteArk Lighthouse กับ Hls.js จาก code snippet ด้านล่าง หรือ จาก CodeSandbox (opens new window)

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ByteArk Lighthouse for Hls.js</title>
</head>
<body>
  <div class="video-container">
    <video id="video" autoplay muted controls></video>
  </div>
   <button id="change-src-btn" class="btn">Change Video Source</button>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
  <script src="https://byteark-sdk.cdn.byteark.com/lighthouse/hlsjs/@latest/lighthouse-hlsjs-plugin.min.js"></script>
  <script>
    var video = document.getElementById('video');
    var changeSrcBtn = document.getElementById('change-src-btn');
    var videoSrc =
      'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8';
    // create Hls.js instance
    var hls = new Hls();
    // create Lighthouse Plugin instance
    var lighthouse = new LighthousePlugin(video, hls, {
      debug: true,
      projectId: 'YOUR_PROJECT_ID',
      // optional set Hls.js version
      hlsjsVersion: Hls.version,
      // optional set metadata
      metadata: {
        user: {
          userId: "YOUR_USER_ID",
        },
        video: {
          videoId: 'TZyZheqEJUwC',
          videoTitle: 'Big Buck Bunny',
        },
      },
    });
    // load video source url
    hls.loadSource(videoSrc);
    // attach video element to Hls.js instance
    hls.attachMedia(video);
    // change video source when the button is clicked
    changeSrcBtn.addEventListener("click", function() {
      // destroy previous lighthouse instance
      lighthouse.destroy();
      // re-create Lighthouse Plugin instance with new config
      lighthouse = new LighthousePlugin(video, hls, {
        debug: true,
        projectId: 'YOUR_PROJECT_ID',
        // optional set Hls.js version
        hlsjsVersion: Hls.version,
        // optional set metadata
        metadata: {
          user: {
            userId: "YOUR_USER_ID",
          },
          video: {
            videoId: 'TZyZhhLbiVxG',
            videoTitle: 'Sintel',
          },
        },
      });
      // load new source
      hls.loadSource('https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZhhLbiVxG/playlist.m3u8');
    });
  </script>
</body>
</html>