diff --git a/index.html b/index.html index 633b07d..7d0d9cc 100644 --- a/index.html +++ b/index.html @@ -1,105 +1,33 @@ - - - - + + + + + Hello, world! + - Hello, world! - - -
-

Test

-
- -
-
-
-
- -
-
-
-
- placeholder image -
-
Video 1
- Subtitle -
-
-
- placeholder image -
-
Video 2
- Subtitle -
-
-
- placeholder image -
-
Video 3
- Subtitle -
-
-
- placeholder image -
-
Video 4
- Subtitle -
-
-
- placeholder image -
-
Video 5
- Subtitle -
-
-
- placeholder image -
-
Video 6
- Subtitle -
-
-
- placeholder image -
-
Video 7
- Subtitle -
-
-
- placeholder image -
-
Video 8
- Subtitle -
-
-
- placeholder image -
-
Video 9
- Subtitle -
-
-
- placeholder image -
-
Video 10
- Subtitle -
-
+ +
+

Test

+
+
+
+
+
+
+
+
+
+ + + + + + - - - - - diff --git a/index.js b/index.js new file mode 100644 index 0000000..1886a92 --- /dev/null +++ b/index.js @@ -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 += `
+ thumbnail +
+
${item.name}
+ ${item.subtitle} +
+
+ `; + }); + + 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);