当我使用 JavaScript 动态加载下一个视频时出现黑屏

Getting black screen when I load next video dynamically using JavaScript

本文关键字：视频 下一个 加载 JavaScript 动态      更新时间：2023-09-26

我正在尝试使用JavaScript在我的网页中动态更改视频。第一个视频（.mp4格式）文件播放良好，但是当我单击按钮更改视频时，它显示一些黑屏而不是播放下一个视频。

我通过阅读许多Stack Overflow文章尝试了多种方法来解决此问题，但是它仍然不起作用。

谁能指导我解决这个问题？

我的 JavaScript 代码：

function vidSwap() {
    var player = document.getElementById("player");
    player.pause();
    document.getElementById("webm").src = "D:'movies'Telugu'movie2.webm";
    document.getElementById("mp4").src = "D:'movies'Telugu'movie2.mp4";
    document.getElementById("ogg_src").src = "D:'movies'Telugu'movie2.ogg";
    player.load();
    player.play();
}

我的网页代码：

<video id="player" height="380" width="440" controls>
    <source id="webm" src="D:'movies'Telugu'movie1.webm" type="video/webm" />
    <source id="mp4" src="D:'movies'Telugu'movie1.mp4" type="video/mp4" />
    <source id="ogg_src" src="D:'movies'Telugu'movie1.ogg" type="video/ogg" />
</video>
<br>
<br>
<input type="button" value="Next Video Clip" onclick="vidSwap()" />

您的问题出在vidSwap函数中：当您设置每个元素的 src 属性时，您使用的字符串中的反斜杠被解释为转义字符。

document.getElementById("webm").src = "D:'movies'Telugu'movie2.webm";
//                                       ^^     ^^     ^^

您需要通过在每个反斜杠（''）之前添加一个额外的反斜杠来转义反斜杠字符，如下所示：

document.getElementById("webm").src = "D:''movies''Telugu''movie2.webm";
// Repeat for each string

祝您编码愉快！

相关文章：