18

我为 HTML5 尝试了一个简单的示例，但它似乎不起作用。

<!DOCTYPE html>
<html>

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

</html>

我在 chrome 上尝试了这个例子，视频加载了，但它不播放，如果我来回移动滑块，我可以看到视频帧，但视频本身不播放。

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

4

15 回答 15

11

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

于 2014-03-05T19:32:03.477 回答
5

我不同意亚历克斯佩雷奥拉。它可以通过引用文件名和/或路径从本地机器加载。

我遇到了类似的问题，结果发现 Win 7 Pro 中的 IIS 在它的 mime 类型中没有 mp4。必须添加添加 mime 类型。请参阅下面链接中添加 mime 类型的说明。

html5 视频不播放 mp4 错误“Invalid Source”？

于 2013-07-18T03:51:14.130 回答
3

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

<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>
于 2014-11-19T05:29:06.580 回答
3

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

问题是<video>元素在src. 如果我们在加载后将<video>元素放入 DOM，src那么问题将得到解决。

如果是 Angular，我们可以使用它*ngIf来解决问题。以下是 Angular 代码片段：

<video autoplay *ngIf="src" class="thumbnail">
  <source [src]="src" [type]="type">
</video>
于 2019-03-05T09:28:39.443 回答
2

您不能使用 HTML5 Video 标签加载这样的本地文件。您必须使用本地主机或远程托管文件。尝试安装 mamp/wamp 并通过虚拟主机加载它。

<source src="http://localhost/development/programs/html/html5/sample/sample1.m4v" type="video/mp4" />
于 2012-05-30T09:27:31.243 回答
2

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

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

于 2020-06-12T22:09:44.527 回答
2

如果您的视频类型是在 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>
于 2019-04-12T16:57:21.840 回答
1

由于 IIS 中未添加 mime 类型，视频未在服务器中播放。

添加 Mime 类型：

• 转到 IIS 并选择您的站点

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

• 在文件扩展名下添加mp4，在Mime 类型下添加视频/mp4，然后单击确定。

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

于 2018-12-06T07:05:22.410 回答
0

尝试为您的视频设置一个相对 uri。"D:/..." 仅适用于本地窗口，而不适用于所有浏览器。

于 2012-05-30T10:57:46.193 回答
0

这可能是由于视频编码。检查视频的编码，看看 Chrome 是否支持。这可能是我遇到的可能原因。尝试使用 ff-mpeg 之类的编码器对视频进行编码。

于 2013-01-02T11:17:30.580 回答
0

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

Firefox：不支持 H.264 内容

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

于 2012-10-08T12:16:49.567 回答
0

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

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
于 2018-09-07T08:34:30.003 回答
0

我在 IIS 上托管时遇到了这个问题，并在这里找到了解决方案。就我而言，即使将完整的视频 URL 放在 Chrome 上也会给我 404 错误，因为站点配置中不存在 MP4 MIME 类型。因此，我添加了带有 MIME 视频/mp4 的 .mp4，一切正常。不知道是否与 tomcat 相同，但这值得一试......

于 2015-10-13T14:04:16.517 回答
0

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

于 2021-08-01T16:18:20.143 回答
0

添加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>
于 2017-03-06T18:16:14.597 回答