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

Clean up codes

Browse Source
This commit is contained in:
Pitchaya Boonsarngsuk
2019-03-23 11:46:51 +00:00
parent c39c346c54
commit e6e95c299b
6 changed files with 211 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
.gitignore vendored Normal file
View File

@@ -0,0 +1,74 @@
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
# User-specific stuff
.idea/**/workspace.xml
.idea/**/tasks.xml
.idea/**/usage.statistics.xml
.idea/**/dictionaries
.idea/**/shelf
# Generated files
.idea/**/contentModel.xml
# Sensitive or high-churn files
.idea/**/dataSources/
.idea/**/dataSources.ids
.idea/**/dataSources.local.xml
.idea/**/sqlDataSources.xml
.idea/**/dynamic.xml
.idea/**/uiDesigner.xml
.idea/**/dbnavigator.xml
# Gradle
.idea/**/gradle.xml
.idea/**/libraries
# Gradle and Maven with auto-import
# When using Gradle or Maven with auto-import, you should exclude module files,
# since they will be recreated, and may cause churn. Uncomment if using
# auto-import.
# .idea/modules.xml
# .idea/*.iml
# .idea/modules
# CMake
cmake-build-*/
# Mongo Explorer plugin
.idea/**/mongoSettings.xml
# File-based project format
*.iws
# IntelliJ
out/
# mpeltonen/sbt-idea plugin
.idea_modules/
# JIRA plugin
atlassian-ide-plugin.xml
# Cursive Clojure plugin
.idea/replstate.xml
# Crashlytics plugin (for Android Studio and IntelliJ)
com_crashlytics_export_strings.xml
crashlytics.properties
crashlytics-build.properties
fabric.properties
# Editor-based Rest Client
.idea/httpRequests
# Android studio 3.1+ serialized cache file
.idea/caches/build_file_checksums.ser
caddy*

BIN
images/gitea.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
images/gitea192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
images/gitea512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 80 KiB

50
index.html
View File

@@ -3,38 +3,38 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
<meta name="apple-mobile-web-app-title" content="Live EDtv"> <meta name="apple-mobile-web-app-title" content="Live EDtv">
<link rel="apple-touch-icon" sizes="192x192" href="images/Livetv192.png"> <link rel="apple-touch-icon" sizes="192x192" href="images/Livetv192.png">
<link rel="apple-touch-icon" sizes="512x512" href="images/Livetv512.png"> <link rel="apple-touch-icon" sizes="512x512" href="images/Livetv512.png">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<title>Live Edtv</title> <title>Live Edtv</title>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1 id="titleText">Test</h1> <h1 id="titleText">Test</h1>
</div> </div>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-8"> <div class="col-xs-12 col-md-8">
<div class="embed-responsive embed-responsive-16by9"> <div class="embed-responsive embed-responsive-16by9">
<video id="vidPlayer" class="embed-responsive-item" controls></video> <video id="vidPlayer" class="embed-responsive-item" controls></video>
</div>
</div>
<div id="videoListContainer" class="col-xs-8 col-md-4 pre-scrollable" style="min-height:100%">
</div> </div>
</div>
<div id="videoListContainer" class="col-xs-8 col-md-4 pre-scrollable" style="min-height:100%">
</div>
</div> </div>
</div> </div>
<!-- jQuery first, then Popper.js, then Bootstrap JS --> <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.3.1.slim.min.js"></script> <script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper-umd/popper.min.js"></script> <script src="js/popper-umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.min.js"></script>
<script src="js/hls.min.js"></script> <script src="js/hls.min.js"></script>
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>
</html> </html>

224
index.js
View File

@@ -1,82 +1,82 @@
const vids = [ const vids = [
{ {
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",
name: "CH1", name: "CH1",
subtitle: "การประชาสัมพันธ์", subtitle: "การประชาสัมพันธ์",
}, },
{ {
url: "https://vdo.mwit.ac.th/live/live2/playlist.m3u8", url: "https://vdo.mwit.ac.th/live/live2/playlist.m3u8",
thumbnail: "images/Mlive2.png", thumbnail: "images/Mlive2.png",
name: "CH2", name: "CH2",
subtitle: "หอประชุมพระอุบาลีคุณูปมาจารย์", subtitle: "หอประชุมพระอุบาลีคุณูปมาจารย์",
}, },
{ {
url: "https://vdo.mwit.ac.th/live/live3/playlist.m3u8", url: "https://vdo.mwit.ac.th/live/live3/playlist.m3u8",
thumbnail: "images/Mlive3.png", thumbnail: "images/Mlive3.png",
name: "CH3", name: "CH3",
subtitle: "ห้องประชุม ศ.ดร.ณัฐ ภมรประวัติ", subtitle: "ห้องประชุม ศ.ดร.ณัฐ ภมรประวัติ",
}, },
{ {
url: "https://vdo.mwit.ac.th/live/live4/playlist.m3u8", url: "https://vdo.mwit.ac.th/live/live4/playlist.m3u8",
thumbnail: "images/Mlive4.png", thumbnail: "images/Mlive4.png",
name: "CH4", name: "CH4",
subtitle: "ห้องฉายภาพยนตร์สามมิติ", subtitle: "ห้องฉายภาพยนตร์สามมิติ",
}, },
{ {
url: "https://vdo.mwit.ac.th/live/live5/playlist.m3u8", url: "https://vdo.mwit.ac.th/live/live5/playlist.m3u8",
thumbnail: "images/Mlive5.png", thumbnail: "images/Mlive5.png",
name: "CH5", name: "CH5",
subtitle: "ห้องประชุม ดร.โกวิท วรพิพัฒน์", subtitle: "ห้องประชุม ดร.โกวิท วรพิพัฒน์",
}, },
{ {
url: "https://vdo.mwit.ac.th/live/live6/playlist.m3u8", url: "https://vdo.mwit.ac.th/live/live6/playlist.m3u8",
thumbnail: "images/Mlive6.png", thumbnail: "images/Mlive6.png",
name: "CH1_science", name: "CH1_science",
subtitle: "สาระวิทยาศาสตร์1", subtitle: "สาระวิทยาศาสตร์1",
}, },
{ {
url: "https://vdo.mwit.ac.th/live/live7/playlist.m3u8", url: "https://vdo.mwit.ac.th/live/live7/playlist.m3u8",
thumbnail: "images/Mlive7.png", thumbnail: "images/Mlive7.png",
name: "CH2_science", name: "CH2_science",
subtitle: "สาระวิทยาศาสตร์2", subtitle: "สาระวิทยาศาสตร์2",
}, },
{ {
url: "https://vdo.mwit.ac.th/live/live8/playlist.m3u8", url: "https://vdo.mwit.ac.th/live/live8/playlist.m3u8",
thumbnail: "images/Mlive8.png", thumbnail: "images/Mlive8.png",
name: "CH_Biology", name: "CH_Biology",
subtitle: "สาระน่ารู้...ชีววิทยา", subtitle: "สาระน่ารู้...ชีววิทยา",
}, },
{ {
url: "https://vdo.mwit.ac.th/live/live9/playlist.m3u8", url: "https://vdo.mwit.ac.th/live/live9/playlist.m3u8",
thumbnail: "images/Mlive9.png", thumbnail: "images/Mlive9.png",
name: "CH_Chemical", name: "CH_Chemical",
subtitle: "สาระน่ารู้...เคมี", subtitle: "สาระน่ารู้...เคมี",
}, },
{ {
url: "https://vdo.mwit.ac.th/live/live10/playlist.m3u8", url: "https://vdo.mwit.ac.th/live/live10/playlist.m3u8",
thumbnail: "images/Mlive10.png", thumbnail: "images/Mlive10.png",
name: "CH_Physics", name: "CH_Physics",
subtitle: "สาระน่ารู้...ฟิสิกส์", subtitle: "สาระน่ารู้...ฟิสิกส์",
}, },
{ {
url: "https://vdo.mwit.ac.th/live/live11/playlist.m3u8", url: "https://vdo.mwit.ac.th/live/live11/playlist.m3u8",
thumbnail: "images/Mlive11.png", thumbnail: "images/Mlive11.png",
name: "CH_Math", name: "CH_Math",
subtitle: "สาระน่ารู้...คณิตศาสตร์", subtitle: "สาระน่ารู้...คณิตศาสตร์",
}, },
{ {
url: "https://vdo.mwit.ac.th/live/ch21/playlist.m3u8", url: "https://vdo.mwit.ac.th/live/ch21/playlist.m3u8",
thumbnail: "images/voice tv.jpg", thumbnail: "images/voice tv.jpg",
name: "Free TV CH21", name: "Free TV CH21",
subtitle: "Voice TV", subtitle: "Voice TV",
}, },
{ {
url: "https://vdo.mwit.ac.th/live/ch23/playlist.m3u8", url: "https://vdo.mwit.ac.th/live/ch23/playlist.m3u8",
thumbnail: "images/Workpoint TV.png", thumbnail: "images/Workpoint TV.png",
name: "Free TV CH23", name: "Free TV CH23",
subtitle: "Workpoint TV", subtitle: "Workpoint TV",
}, },
]; ];
const videoListContainer = document.querySelector('#videoListContainer'); const videoListContainer = document.querySelector('#videoListContainer');
@@ -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) => { vids.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>
@@ -95,46 +95,46 @@ const createVidList = () => {
</div> </div>
</div> </div>
`; `;
}); });
videoListContainer.innerHTML = vidElements; videoListContainer.innerHTML = vidElements;
} };
var hls = null; var hls = null;
var currentVideo = 0; var currentVideo = 0;
const changeVid = index => { const changeVid = index => {
let oldSelectedVideo = document.querySelector(`#playlistEntry${currentVideo}`); let oldSelectedVideo = document.querySelector(`#playlistEntry${currentVideo}`);
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 = vids[index].name;
currentVideo = index; currentVideo = index;
let newSelectedVideo = document.querySelector(`#playlistEntry${currentVideo}`) let newSelectedVideo = document.querySelector(`#playlistEntry${currentVideo}`)
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")) { vids[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(vids[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 = vids[index].url;
vidPlayer.play(); vidPlayer.play();
} }
} };
createVidList(); createVidList();
changeVid(currentVideo); changeVid(currentVideo);