brian/MwitVidPlayer
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Add # location

Browse Source
This commit is contained in:
Pitchaya Boonsarngsuk
2019-03-23 12:17:09 +00:00
parent 0be80c9308
commit 0166b6e371
1 changed files with 26 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
index.js
View File

@@ -1,4 +1,4 @@
const vids = [ const videoList = [
{ {
url: "https://vdo.mwit.ac.th/live/live1/playlist.m3u8", url: "https://vdo.mwit.ac.th/live/live1/playlist.m3u8",
thumbnail: "images/Mlive1.png", thumbnail: "images/Mlive1.png",
@@ -84,10 +84,10 @@ const titleText = document.querySelector('#titleText');
const vidPlayer = document.querySelector('#vidPlayer'); const vidPlayer = document.querySelector('#vidPlayer');
const createVidList = () => { const createVidList = () => {
var vidElements = ""; var vidElements = '';
vids.forEach((item, index) => { videoList.forEach((item, index) => {
vidElements += `<div class="media" id='playlistEntry${index}' onclick='changeVid(${index})' style='transition-timing-function:ease-in-out'> vidElements += `<div class="media" id="playlistEntry${index}" onclick="changeVid(${index})" style="transition-timing-function:ease-in-out">
<img class="mr-3" src="${item.thumbnail}" alt="thumbnail" height="96"> <img class="mr-3" src="${item.thumbnail}" alt="thumbnail" height="96">
<div class="media-body"> <div class="media-body">
<h5 class="mt-0">${item.name}</h5> <h5 class="mt-0">${item.name}</h5>
@@ -101,40 +101,51 @@ const createVidList = () => {
}; };
var hls = null; 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 => { const changeVid = index => {
let oldSelectedVideo = document.querySelector(`#playlistEntry${currentVideo}`); let oldSelectedVideo = document.querySelector(`#playlistEntry${currentVideoIndex}`);
oldSelectedVideo.classList.remove("bg-dark"); oldSelectedVideo.classList.remove("bg-dark");
oldSelectedVideo.classList.remove("text-light"); oldSelectedVideo.classList.remove("text-light");
if(!hls==null) { if (!hls==null) {
console.log("Removing HLS.js"); console.log("Removing HLS.js");
hls.detachMedia(vidPlayer); hls.detachMedia(vidPlayer);
hls = null; hls = null;
} }
console.log("Switching video to index", index); console.log("Switching video to index", index);
titleText.innerHTML = vids[index].name; titleText.innerHTML = videoList[index].name;
currentVideo = index; 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("bg-dark");
newSelectedVideo.classList.add("text-light"); 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() && Hls.isSupported() &&
vids[index].url.endsWith(".m3u8")) { videoList[index].url.endsWith(".m3u8")) {
console.log("Using HLS.js"); console.log("Using HLS.js");
hls = new Hls(); hls = new Hls();
hls.loadSource(vids[index].url); hls.loadSource(videoList[index].url);
hls.attachMedia(vidPlayer); hls.attachMedia(vidPlayer);
hls.on(Hls.Events.MANIFEST_PARSED,()=>{video.play();}); hls.on(Hls.Events.MANIFEST_PARSED,()=>{video.play();});
} }
else { else {
vidPlayer.src = vids[index].url; vidPlayer.src = videoList[index].url;
vidPlayer.play(); vidPlayer.play();
} }
}; };
createVidList(); createVidList();
changeVid(currentVideo); changeVid(currentVideoIndex);