add some todo and logic
This commit is contained in:
parent
271c8e9eff
commit
de19112c2b
1 changed files with 61 additions and 5 deletions
66
js/main.js
66
js/main.js
|
@ -1,13 +1,69 @@
|
||||||
window.addEventListener("load", () => main());
|
window.addEventListener("load", () => main());
|
||||||
|
|
||||||
const main = () => {
|
const main = () => {
|
||||||
const videoTree = {
|
// Video folder
|
||||||
1: "",
|
const videoFolder = "./videos";
|
||||||
|
|
||||||
|
// Video list, as a list of ["filename", "extension"]
|
||||||
|
const videos = {
|
||||||
|
1: ["nameOfFirstVideo", "mp4"],
|
||||||
|
2: ["nameOfSecondVideo", "mp4"],
|
||||||
|
3: ["nameOfThirdVideo", "mp4"],
|
||||||
|
4: ["nameOfFourthVideo", "mp4"],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/* Add option for each videos
|
||||||
|
* For example:
|
||||||
|
* {
|
||||||
|
* 1: [2],
|
||||||
|
* 2: [3, 4]
|
||||||
|
* };
|
||||||
|
*
|
||||||
|
* The video 1 offer the option to redirect to the video 2
|
||||||
|
* The video 2 offer the option to redirect to the video 3 and 4 */
|
||||||
|
const tree = {
|
||||||
|
1: [2],
|
||||||
|
2: [3, 4],
|
||||||
|
};
|
||||||
|
|
||||||
|
// TODO: Add custom label for the button redirection
|
||||||
|
|
||||||
|
// Main Element who will receive the videos
|
||||||
const mainElement = document.getElementsByTagName("main").item(0);
|
const mainElement = document.getElementsByTagName("main").item(0);
|
||||||
|
|
||||||
const newElement = document.createElement("p");
|
// Current video showed to the user
|
||||||
newElement.textContent = "Hello world!";
|
let currentVideo;
|
||||||
mainElement.appendChild(newElement);
|
|
||||||
|
// Buttons showed to the user
|
||||||
|
let buttons = [];
|
||||||
|
|
||||||
|
// Add property to the player
|
||||||
|
currentVideo = document.createElement("video");
|
||||||
|
currentVideo.controls = true;
|
||||||
|
currentVideo.width = window.innerWidth - window.innerWidth / 4;
|
||||||
|
currentVideo.style = "\
|
||||||
|
display: block; \
|
||||||
|
margin: auto;";
|
||||||
|
|
||||||
|
// Init the page with the first video
|
||||||
|
const source = document.createElement("source");
|
||||||
|
|
||||||
|
source.src = `${videoFolder}/${videos[1][0]}.${videos[1][1]}`;
|
||||||
|
source.type = `video/${videos[1][1]}`;
|
||||||
|
|
||||||
|
currentVideo.appendChild(source);
|
||||||
|
mainElement.appendChild(currentVideo);
|
||||||
|
|
||||||
|
// TODO: Add listener of the buttons
|
||||||
|
|
||||||
|
// TODO: Remove the current video and the buttons
|
||||||
|
|
||||||
|
// TODO: Add function who go to the next video (used by the button's listener)
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/* Help:
|
||||||
|
for (let [key, value] of Object.entries(tree)) {
|
||||||
|
// key is the number (0, 1, 2)
|
||||||
|
// value is the [filename, extension]
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
Reference in a new issue