HTML5视频无法播放。

Question

HTML5视频无法播放。

20

我尝试了一个简单的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上尝试了这个示例，视频已经加载，但没有播放。如果我将滑块来回移动，我可以看到视频帧，但视频本身不播放。

更新：我在本地主机（tomcat）上访问它，仍然以同样的方式反应。我还注意到我无法在 Chrome 或 Firefox（更新后）上播放任何 HTML5 视频。

- frewper

2

出于安全原因，不允许这样做。请在本地打开HTML文件以查看视频或将视频上传到服务器。Chrome会显示此错误：不允许加载本地资源。 - jasssonpet

我也遇到了同样的问题，下面的解决方案不可行，但我的程序应该扫描视频目录并提供播放选项，请参见下面的问题并帮助我解决问题：http://stackoverflow.com/questions/16834173/html-5-video-tag-not-working-from-tomcat-edited/16834215?noredirect=1#comment24274462_16834215 - bali208

16个回答

5

我不同意Alex Pereora的观点。只需引用文件名或路径，就可以从本地计算机加载文件。

我曾遇到类似问题，结果发现Win 7 Pro中的IIS没有mp4格式的mime类型。必须添加该mime类型。请参考下面链接中的说明添加mime类型。 html5视频无法播放mp4错误“无效来源”？

- bryanp

5

我现在遇到了相同的问题。我正在使用ajax动态异步获取视频的src。

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

在Angular中，我们可以使用*ngIf来解决这个问题。以下是Angular代码片段：

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

- Karthik

4

我的解决方法是将mp4格式从V1转换为V2：

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

- Don Smith

这实际上出奇地有效。即使没有“-brand mp42”。你知道为什么它能工作吗？ - L.Nightman

3

使用HTML5视频标签无法加载本地文件。您需要使用本地主机或远程托管的文件。尝试安装MAMP / WAMP并通过虚拟主机加载它。

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

- Alex Pereira

我已经做了一些更改，问题仍存在，我已更新问题。 - frewper

8

我不同意。播放 HTML5 视频并不需要使用本地主机，只要将 HTML 文件和视频资源都保存在本地即可直接在桌面上运行。 - SexyBeast

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>

- shihab

2

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

请在应用程序的根目录下添加一个名为web.config的文件，并将以下内容添加到其中：

最初的回答：

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

- A. Wentzel

1

由于 MIME 类型未在 IIS 中添加，因此视频无法在服务器上播放。

添加 MIME 类型：

• 转到 IIS 并选择您的站点

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

• 在文件名扩展名下添加 mp4，在 MIME 类型下添加 video/mp4，然后单击“确定”。

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

- KIshorekumar SP

1

这种方法肯定会起作用。如果有效，请给我的答案点赞。

<video width="50%" height="50%" loop muted id = "autoplay">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>   
<script>
    window.onload = function(){
      document.getElementById("autoplay").play()
    }
</script>

- Mohammad Umar

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

只要添加“muted”标志（无需“play()”），这似乎可以正常工作。 - Franc Jerez

1

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

- Aiyoub A.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rasingh · Accepted Answer

将"controls"作为标志添加。它允许浏览器在视频上运行自己的播放器代码。我在Chrome上尝试了一个.mp4文件，它能够正常工作。