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 name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="manifest" href="manifest.json">
<title>Hello, world!</title>
</head>

154
index.js
View File

@@ -1,77 +1,77 @@
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: "Should use hls.js",
},
{
url: "http://vjs.zencdn.net/v/oceans.mp4",
thumbnail: "images/gitea.png",
name: "DisneyOcean1",
subtitle: "555",
},
{
url: "http://media.w3.org/2010/05/video/movie_300.mp4",
thumbnail: "images/gitea.png",
name: "5min",
subtitle: "Just countdown",
}
];
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);
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: "Should use hls.js",
},
{
url: "http://vjs.zencdn.net/v/oceans.mp4",
thumbnail: "images/gitea.png",
name: "DisneyOcean1",
subtitle: "555",
},
{
url: "http://media.w3.org/2010/05/video/movie_300.mp4",
thumbnail: "images/gitea.png",
name: "5min",
subtitle: "Just countdown",
}
];
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);

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"
}