Question

我正在尝试使用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();
}

我的HTML代码：

<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()" />

Answer 1

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

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

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

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

快乐的编码！

使用JavaScript动态加载下一个视频时获取黑屏

1 个答案: