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

Add manifest

Browse Source
This commit is contained in:
Pitchaya Boonsarngsuk
2018-10-27 01:10:13 +01:00
parent 9e37330b3d
commit dff20fbe1d
3 changed files with 93 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -5,6 +5,7 @@
<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">
<title>Hello, world!</title> <title>Hello, world!</title>
</head> </head>

154
index.js
View File

@@ -1,77 +1,77 @@
const vids = [ const vids = [
{ {
url: "http://media.w3.org/2010/05/bunny/trailer.mp4", url: "http://media.w3.org/2010/05/bunny/trailer.mp4",
thumbnail: "images/gitea.png", thumbnail: "images/gitea.png",
name: "Big Buck Bunny", name: "Big Buck Bunny",
subtitle: "Short Desc", subtitle: "Short Desc",
}, },
{ {
url: "http://media.w3.org/2010/05/sintel/trailer.mp4", url: "http://media.w3.org/2010/05/sintel/trailer.mp4",
thumbnail: "images/gitea.png", thumbnail: "images/gitea.png",
name: "Sintel", name: "Sintel",
subtitle: "Test", 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", 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", thumbnail: "images/gitea.png",
name: "HLS", name: "HLS",
subtitle: "Should use hls.js", subtitle: "Should use hls.js",
}, },
{ {
url: "http://vjs.zencdn.net/v/oceans.mp4", url: "http://vjs.zencdn.net/v/oceans.mp4",
thumbnail: "images/gitea.png", thumbnail: "images/gitea.png",
name: "DisneyOcean1", name: "DisneyOcean1",
subtitle: "555", subtitle: "555",
}, },
{ {
url: "http://media.w3.org/2010/05/video/movie_300.mp4", url: "http://media.w3.org/2010/05/video/movie_300.mp4",
thumbnail: "images/gitea.png", thumbnail: "images/gitea.png",
name: "5min", name: "5min",
subtitle: "Just countdown", subtitle: "Just countdown",
} }
]; ];
const videoListContainer = document.querySelector('#videoListContainer'); const videoListContainer = document.querySelector('#videoListContainer');
const titleText = document.querySelector('#titleText'); const titleText = document.querySelector('#titleText');
const vidPlayer = document.querySelector('#vidPlayer'); const vidPlayer = document.querySelector('#vidPlayer');
var hls = null; var hls = null;
const createVidList = () => { const createVidList = () => {
var vidElements = ""; var vidElements = "";
vids.forEach((item, index) => { vids.forEach((item, index) => {
vidElements += `<div class="media" onclick='changeVid(${index})'> vidElements += `<div class="media" onclick='changeVid(${index})'>
<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>
${item.subtitle} ${item.subtitle}
</div> </div>
</div> </div>
`; `;
}); });
videoListContainer.innerHTML = vidElements; videoListContainer.innerHTML = vidElements;
} }
const changeVid = index => { const changeVid = index => {
titleText.innerHTML = vids[index].name; titleText.innerHTML = vids[index].name;
if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) && if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) &&
Hls.isSupported() && Hls.isSupported() &&
vids[index].url.endsWith(".m3u8")) { vids[index].url.endsWith(".m3u8")) {
if(!hls==null) { if(!hls==null) {
hls.detachMedia(vidPlayer); hls.detachMedia(vidPlayer);
} }
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(0); changeVid(0);

15
manifest.json Normal file
View File

@@ -0,0 +1,15 @@
{
"short_name": "Videos",
"name": "Video Players",
"icons": [
{
"src":"images/gitea.png",
"sizes": "143x143",
"type": "image/png"
}
],
"start_url": "",
"background_color": "#FFF",
"Theme_color": "#536878",
"display": "standalone"
}