1

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?

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
gfr
  • 25
  • 5
  • 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

1 Answers1

0

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>
Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
  • I'm still trying to implement this and would love some clarification, mind building a simple example with a few example mp4 files for me? Remember the main purpose of this code is to avoid writing out the full src domain directory more than once or twice, but have support for unlimited referenced mp4 or other files stored within the domain directory... – gfr Jun 08 '22 at 04:03
  • @giffur since the original problem is about two HTML pages, the first one leading to the other, it is outside the scope a snippet or a fiddle can support. As a result, you will need to build a two-paged proof-of-concept which illustrates what you already have and that is not working properly yet. Once you successfully create that, you can share the link to your proof-of-concept here and I can play around with it and provide a solution. The idea is that you need to build your pages, even if they do not work and then I'm happy to look into them and suggest a fix for them. – Lajos Arpad Jun 08 '22 at 10:04