javascript - 如何在 HTML 视频源中调用 javascript 变量

Question

我正在开发一个流媒体网站，但我不知道如何调用 HTML src 属性中的 Javascript 变量来显示视频。我知道如何解决这个问题的唯一方法是创建多个页面并将视频名称本身硬编码到其中。所有文件都命名为 EP1.mp4、EP2.mp4、EP3.mp4 等。我需要了解如何将数字 [EP->1<-.mp4] 放入变量并将其调用到 src 属性中所以它知道去哪里寻找。我是 HTML 和 Javascript 新手。

我尝试将 javascript 变量放在单引号、+ 和引号中，但没有成功。

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>

我希望命令如图所示

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

Answer 1

我简化了你的代码。
每次点击都会传递一个函数参数(剧集编号)，然后下面的function ep(num)可以读取相同的输入参数，并且代码将设置作为视频元素的 .src 。

<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>