How do I change the html video src with different a links?

Question

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?

You will certainly need javascript for this - https://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag — Himanshu Jangid, May 25 '22 at 10:34
also this to get query data from url : https://stackoverflow.com/questions/9870512/how-to-obtain-the-query-string-from-the-current-url-with-javascript — Himanshu Jangid, May 25 '22 at 10:36

score 0 · Accepted Answer · answered May 25 '22 at 11:04

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 onload="fillSrc">
        <!-- some stuff -->
        <video id="my-video">
        <!-- some stuff -->
    </body>