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

Question

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

我尝试将 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>