วิธีการติดตั้ง 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';
     var hls = null;
     var lighthouse = null;
     // create lighthouse plugin config
     var lighthouseConfig = {
       debug: true,
       projectId: 'YOUR_PROJECT_ID',
       // optional set Hls.js version
       hlsjsVersion: Hls.isSupported() ? Hls.version : null,
       // optional set metadata
       metadata: {
         user: {
           userId: "YOUR_USER_ID",
         },
         video: {
           videoId: 'TZyZheqEJUwC',
           videoTitle: 'Big Buck Bunny',
         },
       },
     }
     if (Hls.isSupported()) {
       // create Hls.js instance
       hls = new Hls();
       // create Lighthouse Plugin instance WITH Hls.js
       lighthouse = new LighthousePlugin(video, hls, lighthouseConfig);
       // load video source url
       hls.loadSource(videoSrc);
       // attach video element to Hls.js instance
       hls.attachMedia(video);
     } else {
       // create Lighthouse Plugin instance WITHOUT Hls.js
       lighthouse = new LighthousePlugin(video, hls, lighthouseConfig);
       // load video source url
       video.src = videoSrc;
     }
   </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	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 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 const videoSources = [
      {
        id: "TZyZheqEJUwC",
        label: "Big Buck Bunny",
        url: "https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8",
      },
      {
        id: "TZyZhhLbiVxG",
        label: "Sintel",
        url: "https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZhhLbiVxG/playlist.m3u8",
      },
    ];
    function createLighthousePlugin(videoElement, hls, currentSource) {
      var lighthouse = new LighthousePlugin(video, hls, {
        debug: true,
        projectId: 'YOUR_PROJECT_ID',
        // optional set Hls.js version
        hlsjsVersion: hls ? Hls.version : null,
        // optional set metadata
        metadata: {
          user: {
            userId: "YOUR_USER_ID",
          },
          video: {
            videoId: currentSource.id,
            videoTitle: currentSource.label,
          },
        },
      });
      return lighthouse;
    }
    var video = document.getElementById('video');
    var changeSrcBtn = document.getElementById('change-src-btn');
    function loadVideo(videoSourceIndex) {
      if (window.hls) {
        window.hls.destroy();
      }
      if (window.lighthouse) {
        window.lighthouse.destroy();
      }
      var currentSource = videoSources[videoSourceIndex];
      // check is browser support Hls.js or not
      if (Hls.isSupported()) {
        // browser is supported Hls.js
        var hls = new Hls();
        window.hls = hls;
        // create Lighthouse Plugin instance WITH Hls.js
        var lighthouse = createLighthousePlugin(
          video,
          hls,
          currentSource
        );
        window.lighthouse = lighthouse;
        // load video source url
        hls.loadSource(currentSource.url);
        // attach video element to Hls.js instance
        hls.attachMedia(video);
      } else {
        // browser doesn't support Hls.js
        // create Lighthouse Plugin instance WITHOUT Hls.js
        var lighthouse = initLighthousePlugin(video, null, currentSource);
        window.lighthouse = lighthouse;
        // load video source url
        video.src = currentSource.url;
      }
    }
    // change video source when the button is clicked
    changeSrcBtn.addEventListener("click", function() {
      loadVideo(1);
    });
    loadVideo(0);
  </script>
</body>
</html>