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

您没有关闭<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 2

你在源头上丢失了你的结束标签。

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

video.asp

Answer 3

如何调试此问题？

由于这实际上是一个语法错误，一些IDE或代码编辑可能会帮助您识别它。例如，我使用的是Visual Studio代码，它突出显示并指出代码有问题：

​

​

代码中的"</video“(在我的VSCode中为红色)根本不会被解释，而">”(在my VSCode中是灰色的)将充当source的结束标记。这样，您的“错误消息”单词将被解释为HTML属性的source标记。

一个更好的方法来调试任何东西-web是通过使用浏览器的DevTools。在您的示例中，您将打开元素检查器，查看浏览器从HTML代码中实际呈现的内容：

​

​

您会注意到代码中的视频“之后”的所有内容实际上都在video元素中。如前所述，您的“错误消息”单词被解释为source标记的HTML属性。修复错误(自行关闭source )后，您将注意到浏览器按预期呈现所有内容：

​

​

• 在Firefox中打开html检查器
• 在Chrome中打开html检查器