เมื่อผมอยากทำ Multi Subtitles ใน Disney+ Hotstar ไว้ฝึกภาษา

//url ลิงก์ของ subtitle.vtt
let subtitleUrlEN = "https://hses6.hotstar.com/videos/blaaaaa/subtitle/lang_eng_1690572338496/subtitle.vtt";
let subtitleUrlTH = "https://hses6.hotstar.com/videos/blaaaaa/subtitle/lang_tha_1690572338496/subtitle.vtt";
//เข้าถึง element video
let video = document.querySelector('video');
//เพิ่ม attribute ชื่อ crossorigin = anonymous ลงใน tag video
video.setAttribute("crossorigin", "anonymous");
//เพิ่ม tag track 2 อัน ลงใน element video
video.innerHTML = `<track src="${subtitleUrlEN}"></track><track src="${subtitleUrlTH}"></tracksrc>`;

//เข้าถึง element track ที่เราเพิ่มจากบรรทัดบน
let track = document.querySelectorAll("track");
//เปลี่ยน mode ของ track ทั้ง 2 ให้เป็น hidden คือมันจะทำงานอยู่เบื้องหลังแต่เราจะไม่เห็น 
track[0].track.mode = "hidden";
track[1].track.mode = "hidden";

//เข้าถึง element ถัดไปจาก video ซึ่งจะได้ div ที่คลุมพวก subtitle
let txtSubElem = video.nextSibling;
//เปลี่ยน html ใน element div ทั้งหมดเป็นข้างล่างนี้ เป็นโค้ดจาก disney plus แค่เพิ่ม span เข้าไป 2 ชุดพร้อมใส่ id กำกับไว้
txtSubElem.innerHTML = `<div style="position: absolute; left: 0px; width: 100%; height: 100%; min-width: 48px; text-align: center; overflow: hidden; bottom: 0px; margin: auto;">
<span id="sub1" style="white-space: nowrap; padding: 0px 1rem; color: white; background-color: rgba(0, 0, 0, 0.8); direction: ltr; font-weight: 400; font-style: normal; left: 50%; transform: translateX(-50%); position: absolute; bottom: 9%; text-align: center; writing-mode: horizontal-tb;">SUB 1</span>
<span id="sub2" style="white-space: nowrap; padding: 0px 1rem; color: white; background-color: rgba(0, 0, 0, 0.8); direction: ltr; font-weight: 400; font-style: normal; left: 50%; transform: translateX(-50%); position: absolute; bottom: 5%; text-align: center; writing-mode: horizontal-tb;">SUB 2</span>
</div>`;

//เข้าถึง element id=sub1 จะได้ span มา
let sub1 = document.querySelector('#sub1');
//event cuechange คือเมื่อข้อความเปลี่ยน เราก็ดึงเอา text มันไปยัดลงใน span แทน
video.textTracks[0].oncuechange = function(e) {
  let cue = this.activeCues[0];
  if(cue){
    sub1.innerHTML = cue.text;
  }else{
    sub1.innerHTML = '';
  }
};
//เข้าถึง element id=sub2 จะได้ span มา
let sub2 = document.querySelector('#sub2');
//event cuechange คือเมื่อข้อความเปลี่ยน เราก็ดึงเอา text มันไปยัดลงใน span แทน
video.textTracks[1].oncuechange = function(e) {
  let cue = this.activeCues[0];
  if(cue){
    sub2.innerHTML = cue.text;
  }else{
    sub2.innerHTML = '';
  }
};

//เข้าถึง element video
let video = document.querySelector('video');
//เพิ่ม attribute ชื่อ crossorigin = anonymous ลงใน tag video
video.setAttribute("crossorigin", "anonymous");
//เพิ่ม tag track 2 อัน ลงใน element video
video.innerHTML = "<track></track><track></track>";

//เข้าถึง element ถัดไปจาก video ซึ่งจะได้ div ที่คลุมพวก subtitle
let txtSubElem = video.nextSibling;
//เปลี่ยน html ใน element div ทั้งหมดเป็นข้างล่างนี้ เป็นโค้ดจาก disney plus แค่เพิ่ม span เข้าไป 2 ชุดพร้อมใส่ id กำกับไว้
txtSubElem.innerHTML = `<div style="position: absolute; left: 0px; width: 100%; height: 100%; min-width: 48px; text-align: center; overflow: hidden; bottom: 0px; margin: auto;">
<span id="sub1" style="white-space: nowrap; padding: 0px 1rem; color: white; background-color: rgba(0, 0, 0, 0.8); direction: ltr; font-weight: 400; font-style: normal; left: 50%; transform: translateX(-50%); position: absolute; bottom: 9%; text-align: center; writing-mode: horizontal-tb;">SUB 1</span>
<span id="sub2" style="white-space: nowrap; padding: 0px 1rem; color: white; background-color: rgba(0, 0, 0, 0.8); direction: ltr; font-weight: 400; font-style: normal; left: 50%; transform: translateX(-50%); position: absolute; bottom: 5%; text-align: center; writing-mode: horizontal-tb;">SUB 2</span>
</div>`;

//ถ้ามี resource โหลดใหม่ก็เข้ามารันในนี้
const observer = new PerformanceObserver((list) => {
  list.getEntries().sort().forEach((entry) => {
    //เช็คว่า resource ที่โหลดเข้ามาลิงก์มันมีคำว่า subtitle.vtt อยู่ไหม
    if(entry.name.includes('subtitle.vtt')){
      //ถ้าเจอ subtitle.vtt ให้หยุดการเช็ค resource ที่โหลดใหม่ๆเข้ามา
      observer.disconnect();
      //เก็บลิงก์ลงตัวแปร ตัวอย่างลิงก์ https://hses6.hotstar.com/videos/blaaaaa/subtitle/lang_eng_1690572338496/subtitle.vtt
      let subtitleUrl = entry.name; 
      //regex เพื่อหาข้อความภาษาใน url
      const regexp = /lang_(...)/g;
      //ดึงข้อความ eng ออกมาจากลิงก์บางทีตอนเราโหลด resource อาจไปดึงซับภาษาอื่นมาเช่น อินโด(ind), มาเลย์(msa)
      const languageSubtitle = [...subtitleUrl.matchAll(regexp)][0][1]; 
      //เข้าถึง element track แล้วก็เอาลิงก์
      let track = document.querySelectorAll("track");
      //สร้างตัวแปรอยากให้ sub1, sub2 เป็นภาษาอะไร ดูจาก ISO 639-2 ว่า language code ใช้อะไร
      let langCodeSub1 = "eng"; //อังกฤษ
      let langCodeSub2 = "tha"; //ไทย
      //replace จาก url ให้เป็นภาษาที่เราต้องการ แล้วก็ซ่อน track ไว้ไม่ให้แสดง
      track[0].src = subtitleUrl.replace("/lang_"+languageSubtitle,"/lang_"+langCodeSub1);
      track[0].track.mode = "hidden";
      track[1].src = subtitleUrl.replace("/lang_"+languageSubtitle,"/lang_"+langCodeSub2);
      track[1].track.mode = "hidden";

      //เข้าถึง element id=sub1 จะได้ span มา
      let sub1 = document.querySelector('#sub1');
      //event cuechange คือเมื่อข้อความเปลี่ยน เราก็ดึงเอา text มันไปยัดลงใน span แทน
      video.textTracks[0].oncuechange = function(e) {
        let cue = this.activeCues[0];
        if(cue){
          sub1.innerHTML = cue.text;
        }else{
          sub1.innerHTML = '';
        }
      };

      //เข้าถึง element id=sub2 จะได้ span มา
      let sub2 = document.querySelector('#sub2');
      //event cuechange คือเมื่อข้อความเปลี่ยน เราก็ดึงเอา text มันไปยัดลงใน span แทน
      video.textTracks[1].oncuechange = function(e) {
        let cue = this.activeCues[0];
        if(cue){
          sub2.innerHTML = cue.text;
        }else{
          sub2.innerHTML = '';
        }
      };
    }
  });
});

observer.observe({ type: "resource", buffered: true });