Question

我正在研究Quentin Watt的新HTML5 / CSS3教程。

最后几个教程涉及插入图像，音频和视频文件。在每种情况下，浏览器都会识别我的属性，如高度，宽度，控件等，但实际上并不显示文件。

代码：

<!-- tutorial 10 -->
<html>
    <head>
        <meta charset="ntf-8"/>
        <title> tutorial 10 - video tag </title>
    </head>
    <body>
        <video width="640" height="360" controls>
            <source src="HowTo.BackLever.mp4" type="video/mp4" /> If you can see this you need to update your browser>
        </video>
    </body>
</html>

我相信我的道路是正确的，它是全部的。有问题的文件与页面的源代码位于同一目录中。

我已尝试使用Chrome和Firefox，但我无法弄清楚浏览器无法显示文件的原因。

我已经研究过这个问题，并且没有在这个网站上或通过谷歌找到任何帮助。

Answer 1

确保您的图片文件位于您的webroot上（可能是www或htdocs），然后在您的src中引用它。

Answer 2

您确定视频文件路径是否正确？文件名中的HowTo和BackLever之间是否有.？检查文件的确切名称和路径。

Answer 3

我尝试过与您相同条件下运行的完全相同的代码（同一文件夹中的视频和html）。

它正在运作。您应该检查视频名称，因为您知道它应该与HTML代码完全相同。

        <!-- tutorial 10 -->
<html>
<head>
<meta charset="ntf-8"/>
<title> tutorial 10 - video tag </title>
</head>
<body>
<video width="640" height="360" controls>
<source src="HowTo.BackLever.mp4" type="video/mp4">
If you can see this you need to update your browser>
</video>
</body>
</html>

我建议使用更简单的视频文件名称来确保。 ;）

Answer 4

问题绝对是文件路径。尝试重命名视频并使用新名称。

src="my_video.mp4"

我也看到人们关注这个视频时隐藏了他们的文件扩展名，然后他们实际上将扩展名添加到他们的文件名中，为视频“my_video.mp4.mp4”制作真正的src。如果它适用于双重扩展，那么你知道这是你的问题。

您还可以通过右键单击视频并查看Windows中的“属性”或OSX上的“获取信息”来确保使用正确的文件类型。请看下面的图片。我今天早上只能在我的Mac上找到一个mov文件，但你需要确保你的视频是mp4。

info for files on mac

video properties in windows 10

你做的其他事情在这里添加了一个更大的标志。我认为这不是问题，但我认为值得一提。

If you can see this you need to update your browser>

开始HTML：src标记无法正常工作？

4 个答案: