47 lines
1.2 KiB
JavaScript
47 lines
1.2 KiB
JavaScript
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);
|