HTML5 调试视频嵌入

Question

我成功地将一个视频嵌入到我的代码中，视频显示在我的浏览器中，但是视频后面的代码没有显示。

当我删除我的视频嵌入代码时，我的其余 HTML5 代码会显示在浏览器上。我该如何调试这个问题？

这是视频代码以及我在视频后紧跟的一小段代码：

<video width="240" height="320" controls>
<source src="Trooper-movie.mp4" type="video/mp4"
Sorry, your browser doesn&#39t support embedded videos.
</video>
<br>
<a href="https://www.googe.com"> Trooper's Instagram</a>

Answer 1

您在来源中缺少结束标记。

<video width="240" height="320" controls>
<source src="Trooper-movie.mp4" type="video/mp4" />
Sorry, your browser doesn&#39t support embedded videos. 
</video>
<br>
<a href="https://www.googe.com"> Trooper's Instagram</a>

https://www.w3schools.com/html/html5_video.asp

Answer 2

您没有关闭 <source> 标签，您应该将备用文本放在该标签之后。

<video width="240" height="320" controls>
    <source src="Trooper-movie.mp4" type="video/mp4">
    Sorry, your browser doesn&#39t support embedded videos.
</video>

<a href="https://www.googe.com"> Trooper's Instagram</a>

Answer 3

How can I debug this issue?

由于这实际上是一个语法错误，一些 IDEs or Code Editors may help you recognize it. For example, I'm using Visual Studio Code 突出显示并指出代码有问题：

你代码中的“</video”（在我的VSCode中是红色的）根本不会被解释，而“>”（在我的[=中是灰色的） 53=]) 将作为 source 的结束标签。这样，您的 "error message" 字词将被解释为 source 标签的 HTML attributes。

调试任何网络的更好方法是使用浏览器的 DevTools。在您的情况下，您将打开元素检查器以查看浏览器实际从您的 HTML 代码呈现的内容：

您会注意到代码中的所有内容 "after" 视频实际上都在 video 元素中。如前所述，您的 "error message" 字词被解释为 source 标签的 HTML 属性。修复错误（自己关闭 source）后，您会注意到浏览器按预期呈现所有内容：

HTML5 调试视频嵌入

HTML5 debugging Video embedding

html

html5-video