62 lines
1.7 KiB
JavaScript
62 lines
1.7 KiB
JavaScript
const vids = [{
|
|
url: "http://media.w3.org/2010/05/bunny/trailer.mp4",
|
|
thumbnail: "images/gitea.png",
|
|
name: "Big Buck Bunny",
|
|
subtitle: "Short Desc",
|
|
}, {
|
|
url: "http://media.w3.org/2010/05/sintel/trailer.mp4",
|
|
thumbnail: "images/gitea.png",
|
|
name: "Sintel",
|
|
subtitle: "Test",
|
|
}, {
|
|
url: "https://vdo.mwit.ac.th/vod/_definst_/mp4:02_description/2561/05/30-05-61/VOD/30-05-61-AV4.mp4/playlist.m3u8",
|
|
thumbnail: "images/gitea.png",
|
|
name: "HLS",
|
|
subtitle: "Woo",
|
|
}];
|
|
|
|
const videoListContainer = document.querySelector('#videoListContainer');
|
|
const titleText = document.querySelector('#titleText');
|
|
const vidPlayer = document.querySelector('#vidPlayer');
|
|
var hls = null;
|
|
|
|
const createVidList = () => {
|
|
var vidElements = "";
|
|
|
|
vids.forEach((item, index) => {
|
|
vidElements += `<div class="media" onclick='changeVid(${index})'>
|
|
<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;
|
|
}
|
|
|
|
const changeVid = index => {
|
|
titleText.innerHTML = vids[index].name;
|
|
|
|
if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) &&
|
|
Hls.isSupported() &&
|
|
vids[index].url.endsWith(".m3u8")) {
|
|
if(!hls==null) {
|
|
hls.detachMedia(vidPlayer);
|
|
}
|
|
hls = new Hls();
|
|
hls.loadSource(vids[index].url);
|
|
hls.attachMedia(vidPlayer);
|
|
hls.on(Hls.Events.MANIFEST_PARSED,()=>{video.play();});
|
|
}
|
|
else {
|
|
vidPlayer.src = vids[index].url;
|
|
vidPlayer.play();
|
|
}
|
|
}
|
|
|
|
createVidList();
|
|
changeVid(0);
|