I would like a website with two HTML files the first has a list of links where each link leads to the other HTML file showing different video sources per link;
Say I clicked on video1, then the page would lead me to the other, automatically filling the src to the correct video
file1
<li><a href="stream.html#video1">video1</a></li>
<li><a href="stream.html#video2">video2</a></li>
file2
<video src="../video/video1">
Do I need JavaScript or jQuery? If so, can you explain or show the way I could make it work?
CodePudding user response：
To answer your initial question: it depends. If you have an application server, then you can use server-side code to generate your HTML and you can subsequently fill the src accordingly.
However, if doing this with server-side code is not an option, then you can achieve this using client-side code.
Passing the src
It's advisable to pass the video info using a URL parameter rather than a hash parameter:
<li><a href="stream.html?src=video1">video1</a></li>
<li><a href="stream.html?src=video2">video2</a></li>
Getting a URL parameter
This is how you can get the value of a parameter, assuming that it exists:
window.location.search.substring(1).split("&").map(item => item.split("=")).filter(item => (item[0] === "src"))[0][1]
Make sure that you have an id for the video in the second HTML
<video id="my-video">
Let's implement a function that fills the src
function fillSrc() {
let param = window.location.search.substring(1).split("&").map(item => item.split("=")).filter(item => (item[0] === "src"));
if (param.length) { //the param exists
document.getElementById("my-video").src = param[0][1];
}
}
Last but not least, run the function on load
Modify your body tag and make sure that this function runs:
<body onl oad="fillSrc">
<!-- some stuff -->
<video id="my-video">
<!-- some stuff -->
</body>