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

Add js

Browse Source
This commit is contained in:
Pitchaya Boonsarngsuk
2018-10-27 00:08:53 +01:00
parent c65727ee82
commit 725e3d72e6
2 changed files with 70 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
index.html
View File

@@ -1,105 +1,33 @@
<!doctype html> <!doctype html>
<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">
<title>Hello, world!</title> <title>Hello, world!</title>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>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 class="embed-responsive-item" controls> <video id="vidPlayer" class="embed-responsive-item" controls></video>
<source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
</video>
</div> </div>
</div> </div>
<div class="col-xs-8 col-md-4 pre-scrollable" style="min-height:100%"> <div id="videoListContainer" class="col-xs-8 col-md-4 pre-scrollable" style="min-height:100%">
<div class="media">
<img class="mr-3" src="images/gitea.png" alt="placeholder image" height="96">
<div class="media-body">
<h5 class="mt-0">Video 1</h5>
Subtitle
</div>
</div>
<div class="media">
<img class="mr-3" src="images/gitea.png" alt="placeholder image" height="96">
<div class="media-body">
<h5 class="mt-0">Video 2</h5>
Subtitle
</div>
</div>
<div class="media">
<img class="mr-3" src="images/gitea.png" alt="placeholder image" height="96">
<div class="media-body">
<h5 class="mt-0">Video 3</h5>
Subtitle
</div>
</div>
<div class="media">
<img class="mr-3" src="images/gitea.png" alt="placeholder image" height="96">
<div class="media-body">
<h5 class="mt-0">Video 4</h5>
Subtitle
</div>
</div>
<div class="media">
<img class="mr-3" src="images/gitea.png" alt="placeholder image" height="96">
<div class="media-body">
<h5 class="mt-0">Video 5</h5>
Subtitle
</div>
</div>
<div class="media">
<img class="mr-3" src="images/gitea.png" alt="placeholder image" height="96">
<div class="media-body">
<h5 class="mt-0">Video 6</h5>
Subtitle
</div>
</div>
<div class="media">
<img class="mr-3" src="images/gitea.png" alt="placeholder image" height="96">
<div class="media-body">
<h5 class="mt-0">Video 7</h5>
Subtitle
</div>
</div>
<div class="media">
<img class="mr-3" src="images/gitea.png" alt="placeholder image" height="96">
<div class="media-body">
<h5 class="mt-0">Video 8</h5>
Subtitle
</div>
</div>
<div class="media">
<img class="mr-3" src="images/gitea.png" alt="placeholder image" height="96">
<div class="media-body">
<h5 class="mt-0">Video 9</h5>
Subtitle
</div>
</div>
<div class="media">
<img class="mr-3" src="images/gitea.png" alt="placeholder image" height="96">
<div class="media-body">
<h5 class="mt-0">Video 10</h5>
Subtitle
</div> </div>
</div> </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="index.js"></script>
</body> </body>
</html> </html>

46
index.js Normal file
View File

@@ -0,0 +1,46 @@
const vids = [{
url: "https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4",
thumbnail: "images/gitea.png",
name: "Big Buck Bunny",
subtitle: "Short Desc",
}, {
url: "a.mp4",
thumbnail: "images/gitea.png",
name: "Video 2",
subtitle: "Test",
}, {
url: "dog.mp4",
thumbnail: "images/gitea.png",
name: "Video 3",
subtitle: "Woo",
}];
const videoListContainer = document.querySelector('#videoListContainer');
const titleText = document.querySelector('#titleText');
const vidPlayer = document.querySelector('#vidPlayer');
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 => {
console.log('VIDEO IS NOW',index)
vidPlayer.src = vids[index].url;
titleText.innerHTML = vids[index].name;
}
createVidList();
changeVid(0);