MwitVidPlayer/index.js

const videoList = [
    {
        url: "https://vdo.mwit.ac.th/live/live1/playlist.m3u8",
        thumbnail: "images/Mlive1.png",
        name: "CH1",
        subtitle: "การประชาสัมพันธ์",
    },
    {
        url: "https://vdo.mwit.ac.th/live/live2/playlist.m3u8",
        thumbnail: "images/Mlive2.png",
        name: "CH2",
        subtitle: "หอประชุมพระอุบาลีคุณูปมาจารย์",
    },
    {
        url: "https://vdo.mwit.ac.th/live/live3/playlist.m3u8",
        thumbnail: "images/Mlive3.png",
        name: "CH3",
        subtitle: "ห้องประชุม ศ.ดร.ณัฐ ภมรประวัติ",
    },
    {
        url: "https://vdo.mwit.ac.th/live/live4/playlist.m3u8",
        thumbnail: "images/Mlive4.png",
        name: "CH4",
        subtitle: "ห้องฉายภาพยนตร์สามมิติ",
    },
    {
        url: "https://vdo.mwit.ac.th/live/live5/playlist.m3u8",
        thumbnail: "images/Mlive5.png",
        name: "CH5",
        subtitle: "ห้องประชุม ดร.โกวิท วรพิพัฒน์",
    },
    {
        url: "https://vdo.mwit.ac.th/live/live6/playlist.m3u8",
        thumbnail: "images/Mlive6.png",
        name: "CH1_science",
        subtitle: "สาระวิทยาศาสตร์1",
    },
    {
        url: "https://vdo.mwit.ac.th/live/live7/playlist.m3u8",
        thumbnail: "images/Mlive7.png",
        name: "CH2_science",
        subtitle: "สาระวิทยาศาสตร์2",
    },
    {
        url: "https://vdo.mwit.ac.th/live/live8/playlist.m3u8",
        thumbnail: "images/Mlive8.png",
        name: "CH_Biology",
        subtitle: "สาระน่ารู้...ชีววิทยา",
    },
    {
        url: "https://vdo.mwit.ac.th/live/live9/playlist.m3u8",
        thumbnail: "images/Mlive9.png",
        name: "CH_Chemical",
        subtitle: "สาระน่ารู้...เคมี",
    },
    {
        url: "https://vdo.mwit.ac.th/live/live10/playlist.m3u8",
        thumbnail: "images/Mlive10.png",
        name: "CH_Physics",
        subtitle: "สาระน่ารู้...ฟิสิกส์",
    },
    {
        url: "https://vdo.mwit.ac.th/live/live11/playlist.m3u8",
        thumbnail: "images/Mlive11.png",
        name: "CH_Math",
        subtitle: "สาระน่ารู้...คณิตศาสตร์",
    },
    {
        url: "https://vdo.mwit.ac.th/live/ch21/playlist.m3u8",
        thumbnail: "images/voice tv.jpg",
        name: "Free TV CH21",
        subtitle: "Voice TV",
    },
    {
        url: "https://vdo.mwit.ac.th/live/ch23/playlist.m3u8",
        thumbnail: "images/Workpoint TV.png",
        name: "Free TV CH23",
        subtitle: "Workpoint TV",
    },
];

const videoListContainer = document.querySelector('#videoListContainer');
const titleText = document.querySelector('#titleText');
const vidPlayer = document.querySelector('#vidPlayer');

const createVidList = () => {
    var vidElements = '';

    videoList.forEach((item, index) => {
        vidElements += `<div class="media" id="playlistEntry${index}" onclick="changeVid(${index})" style="cursor: pointer; transition-timing-function:ease-in-out">
      <img class="mr-3" src="${item.thumbnail}" alt="thumbnail" height="96">
      <div class="media-body">
        <h5 class="mt-0">${item.name}</h5>
        ${item.subtitle}
      </div>
    </div>
    `;
    });

    videoListContainer.innerHTML = vidElements;
};

var hls = null;
var currentVideoIndex = 0;
if(window.location.hash) {
    let hash = window.location.hash;
    if(hash.startsWith('#playlistEntry')) {
        hash = hash.substring(14);
    }
    if(videoList[hash]){
        currentVideoIndex = hash;
    }
}

const changeVid = index => {
    if (index === currentVideoIndex){
        return;
    }
    let oldSelectedVideo = document.querySelector(`#playlistEntry${currentVideoIndex}`);
    oldSelectedVideo.classList.remove("bg-dark");
    oldSelectedVideo.classList.remove("text-light");
    if (!hls==null) {
        console.log("Removing HLS.js");
        hls.detachMedia(vidPlayer);
        hls = null;
    }

    console.log("Switching video to index", index);
    titleText.innerHTML = videoList[index].name;
    currentVideoIndex = index;

    window.location.hash = 'playlistEntry' + currentVideoIndex;

    let newSelectedVideo = document.querySelector(`#playlistEntry${currentVideoIndex}`);
    newSelectedVideo.classList.add("bg-dark");
    newSelectedVideo.classList.add("text-light");

    if (!/Android|webOS|iPhone|iPad|iPod|Edge|iOS/i.test(navigator.userAgent) &&
        Hls.isSupported() &&
        videoList[index].url.endsWith(".m3u8")) {
        console.log("Using HLS.js");
        hls = new Hls();
        hls.loadSource(videoList[index].url);
        hls.attachMedia(vidPlayer);
        hls.on(Hls.Events.MANIFEST_PARSED,()=>{video.play();});
    }
    else {
        vidPlayer.src = videoList[index].url;
        vidPlayer.play();
    }
};

createVidList();
changeVid(currentVideoIndex);