diff --git a/index.js b/index.js index 2c5ca2a..26084d4 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,4 @@ -const vids = [ +const videoList = [ { url: "https://vdo.mwit.ac.th/live/live1/playlist.m3u8", thumbnail: "images/Mlive1.png", @@ -84,10 +84,10 @@ const titleText = document.querySelector('#titleText'); const vidPlayer = document.querySelector('#vidPlayer'); const createVidList = () => { - var vidElements = ""; + var vidElements = ''; - vids.forEach((item, index) => { - vidElements += `
+ videoList.forEach((item, index) => { + vidElements += `
thumbnail
${item.name}
@@ -101,40 +101,51 @@ const createVidList = () => { }; var hls = null; -var currentVideo = 0; +var currentVideoIndex = 0; +if(window.location.hash) { + let hash = window.location.hash; + if(hash.startsWith('#')) { + hash = hash.substring(1); + } + if(videoList[hash]){ + currentVideoIndex = hash; + } +} const changeVid = index => { - let oldSelectedVideo = document.querySelector(`#playlistEntry${currentVideo}`); + let oldSelectedVideo = document.querySelector(`#playlistEntry${currentVideoIndex}`); oldSelectedVideo.classList.remove("bg-dark"); oldSelectedVideo.classList.remove("text-light"); - if(!hls==null) { + if (!hls==null) { console.log("Removing HLS.js"); hls.detachMedia(vidPlayer); hls = null; } console.log("Switching video to index", index); - titleText.innerHTML = vids[index].name; - currentVideo = index; + titleText.innerHTML = videoList[index].name; + currentVideoIndex = index; - let newSelectedVideo = document.querySelector(`#playlistEntry${currentVideo}`) + window.location.hash = 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) && + if (!/Android|webOS|iPhone|iPad|iPod|Edge|iOS/i.test(navigator.userAgent) && Hls.isSupported() && - vids[index].url.endsWith(".m3u8")) { + videoList[index].url.endsWith(".m3u8")) { console.log("Using HLS.js"); hls = new Hls(); - hls.loadSource(vids[index].url); + hls.loadSource(videoList[index].url); hls.attachMedia(vidPlayer); hls.on(Hls.Events.MANIFEST_PARSED,()=>{video.play();}); } else { - vidPlayer.src = vids[index].url; + vidPlayer.src = videoList[index].url; vidPlayer.play(); } }; createVidList(); -changeVid(currentVideo); +changeVid(currentVideoIndex);