Question

我为HTML5尝试了一个简单的示例，但它似乎无法正常工作。

<!DOCTYPE html>
<html>

<body>
  <video width="320" height="240" controls="controls">
    <source src="resources/sample/sample1.m4v" type="video/mp4" />
  </video>
</body>

</html>

我尝试了Chrome上的示例，视频加载，但它没有播放，我可以看到视频帧，如果我来回移动滑块，但视频本身不播放。

更新：我在localhost（tomcat）上访问它，它仍以同样的方式作出反应。另外我注意到我无法在chrome或firefox（更新）上播放任何HTML5视频。

Answer 1

您无法使用HTML5视频标记加载类似的本地文件。您必须使用localhost或远程托管文件。尝试安装mamp / wamp并通过虚拟主机加载它。

<source src="http://localhost/development/programs/html/html5/sample/sample1.m4v" type="video/mp4" />

Answer 2

添加“控件”作为标志。它允许浏览器在视频上运行自己的播放器代码。我在Chrome上使用.mp4文件尝试了这个功能。它可以正常工作。

Answer 3

我不同意Alex Pereora。只需引用文件名和/或路径即可从本地计算机加载它。

我有类似的问题，并且在Win 7 Pro中发现IIS没有mp4的mime类型。必须添加添加mime类型。请参阅以下链接中添加mime类型的说明。

html5 video is not playing mp4 error "Invalid Source"?

Answer 4

使用这两种格式在所有浏览器中都能正常工作：

<video width="640" height="360" controls>
    <!-- MP4 must be first for iPad! -->
    <source src="unbelievable.mp4" type="video/mp4" /><!-- Safari / iOS video    -->
    <source src="movie.ogg" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
</video>

Answer 5

视频未在服务器中播放，因为IIS中未添加哑剧类型。

要添加Mime类型：

•转到IIS并选择您的站点

•单击菜单下的“ MIME类型”，然后单击右侧选项卡上的“添加”

•在File Extension（文件扩展名）下，添加mp4，在Mime下，键入video / mp4，然后单击OK（确定）。

•重新启动IIS，现在运行应用程序

Answer 6

对我有用的是将mp4格式从V1转换为V2：

ffmpeg.exe -i old.mp4 -brand mp42 new-v2.mp4

Answer 7

尝试为您的视频设置相对uri。 “D：/ ...”仅适用于本地Windows，而不适用于所有浏览器。

Answer 8

Chrome：该文件是否也包含音频？如果是这样，并且您正在桌面上播放它，请将扬声器连接到桌面并检查。

Firefox：不支持H.264内容

IE9：以下内容应添加到您的网页<meta http-equiv="X-UA-Compatible" content="IE=edge" />

中

Answer 9

这可能是由于视频编码造成的。请检查视频的编码情况，看看Chrome是否支持该功能。当我遇到它时，这可能是一个可能的原因。尝试使用像ff-mpeg这样的编码器对视频进行编码。

Answer 10

我在IIS上托管时遇到此问题，并找到了解决方案Here。就我而言，即使在Chrome上放置完整的视频网址也会给我404错误，因为网站配置中不存在MP4 MIME类型。所以，我添加了.mp4和MIME视频/ mp4，一切都正确。 Dunno，如果与tomcat相同，那值得一试......

Answer 11

将autoplay loop添加到视频代码中以便自动播放，如下所示：

<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" autoplay loop>
  <source src="resources/sample/sample1.m4v" type="video/mp4" />
</video>
</body>
</html>

Answer 12

只需将控件设置为标志，而不是键=值对：

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
  <source src="resources/sample/sample1.m4v" type="video/mp4" />
</video>

</body>
</html>

Answer 13

我现在面临着同样的问题。我正在使用ajax异步地获取视频的src。

问题是<video>元素在src之前被加载。如果在加载<video>之后将src元素放入DOM中，则问题将得到解决。

对于Angular，我们可以使用*ngIf来解决此问题。以下是Angular代码段：

<video autoplay *ngIf="src" class="thumbnail">
  <source [src]="src" [type]="type">
</video>

Answer 14

如果您的视频类型是在IIS / .NET上运行的MP4

将web.config文件添加到应用程序web.config的根目录中，其中包含以下内容

  <?xml version="1.0" encoding="UTF-8"?>
  <configuration>
    <system.webServer>
      <staticContent>
        <mimeMap fileExtension=".mp4" mimeType="application/mp4" />
       </staticContent>
    </system.webServer>
  </configuration>

Answer 15

请确保您已正确插入视频路径。您的“资源”文件夹和视频标签所在的页面必须在同一文件夹中。

HTML5视频无法播放

15 个答案: