How to call a javascript variable in a HTML video source

Question

I am working on a streaming website and I don't know how to call a Javascript variable in the HTML src attribute for displaying a video. The only way that I know how to solve this is by creating multiple pages and hard coding the video names themselves into it. All of the files are named EP1.mp4, EP2.mp4, EP3.mp4, etc. I need to find out how to make the number [EP->1<-.mp4] into a variable and call it into the src attribute so it knows where to look. I am new to HTML and Javascript.

I have tried putting the javascript variable in single quotes, +'s, and quotes but to no avail.

page1.html

<button onclick="ep1()">Episode1</button>
<button onclick="ep2()">Episode2</button>
<script>
    function ep1() {
    var Epinum = "1";
    var Anime = "Toradora!"
    localStorage.setItem("Epinum",Epinum);
    localStorage.setItem("Anime",Anime);
    window.location = 'page2.html';
    }

    function ep2() {
    var Epinum = "2";
    var Anime = "Toradora!"
    localStorage.setItem("Epinum",Epinum);
    localStorage.setItem("Anime",Anime);
    window.location = 'page2.html';
    }
</script>

page2.html

<video src="OGAnime/+'Anime'/EP+'Epinum'.mp4" width="320" height="240" controls>
    Video not supported
</video>

I would like the command to be as shown

<video src="OGAnime/[Anime var goes here]/EP[Epinum var goes here].mp4" width="320" height="240" controls>
    Video not supported
</video>

give id to video tag, document.querySelector('#idvideotag').src = `begin${var}end` — FrV
– FrV, Commented Aug 16, 2019 at 8:23

VC.One · Accepted Answer · 2019-08-16 13:17:31Z

1

I simplify your code.
Each click will pass a function parameter (the episode number), then following function ep(num) can read that same input parameter and the code will set that as .src for the video element.

<button onclick="ep('1')">Episode1</button>
<button onclick="ep('2')">Episode2</button>
<script>
function ep(num) {
    var Epinum = num;
    var Anime = "Toradora!"
    localStorage.setItem("Epinum",Epinum);
    localStorage.setItem("Anime",Anime);
    document.querySelector('#idvideotag').src = 'OGAnime/'+Anime+'/EP'+Epinum+'.mp4';
}
</script>

edited Aug 16, 2019 at 13:17

VC.One

16.2k4 gold badges27 silver badges66 bronze badges

answered Aug 16, 2019 at 8:33

JamesYin

7529 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

gagy7 Over a year ago

How do I call the ('#idvideotag') as src for the video?

JamesYin Over a year ago

I'm sorry. English not my native language. What do you mean 'call src for video' ? <vide> will load the video source from server automatic by using src location.

gagy7 Over a year ago

as in how do i use the #idvideotag tag. Is it like this? <video> src= #idvideotag controls </video>

JamesYin Over a year ago

#is ID property. It should be added inside <video>, like <video id="idvideotag" >. I still confuse with your question. Maybe you should read some document about HTML then ask me again. Good day.

Collectives™ on Stack Overflow

How to call a javascript variable in a HTML video source

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related