Html HTML5 视频无法播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10813408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 video not playing
提问by frewper
I tried a simple example for HTML5 but it doesnt seem to work.
我尝试了一个简单的 HTML5 示例，但似乎不起作用。
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="resources/sample/sample1.m4v" type="video/mp4" />
</video>
</body>
</html>I tried the example on chrome, the video loads up, but it does not play, i can see the video frames if i move the slider to and fro but the video itself doesnot play.
我在 chrome 上尝试了这个例子，视频加载了，但它不播放，如果我来回移动滑块，我可以看到视频帧，但视频本身不播放。
UPDATE: I accessed this on localhost(tomcat), its still reacting in the same way. Also i noticed that i am not able to play any HTML5 videos on chrome or firefox(updated).
更新：我在 localhost(tomcat) 上访问了这个，它仍然以同样的方式做出反应。我还注意到我无法在 chrome 或 firefox（更新）上播放任何 HTML5 视频。
回答by rasingh
Add "controls" as a flag. It allows the browser to run it's own player code on the video. I tried this with a .mp4 file on Chrome and it works.
添加“控件”作为标志。它允许浏览器在视频上运行它自己的播放器代码。我在 Chrome 上用 .mp4 文件试过这个，它工作正常。
回答by bryanp
I do not agree with Alex Pereora. It can be loaded from local machine just by referencing file names and or paths.
我不同意 Alex Pereora。它可以通过引用文件名和/或路径从本地机器加载。
I had similar issue, and turned out IIS in Win 7 Pro does not have mp4 in it's mime types. Must add add the mime type. see instructions for adding mime type in link below.
我遇到了类似的问题，结果发现 Win 7 Pro 中的 IIS 的 mime 类型没有 mp4。必须添加添加 MIME 类型。请参阅以下链接中添加 MIME 类型的说明。
回答by Alex Pereira
You can't load a localfile like that with the HTML5 Video tag. You'll have to use a localhost or a distant hosted file. Try to install mamp/wamp and load it through the virtual host.
您不能使用 HTML5 Video 标签加载这样的本地文件。您必须使用本地主机或远程托管文件。尝试安装mamp/wamp并通过虚拟主机加载。
<source src="http://localhost/development/programs/html/html5/sample/sample1.m4v" type="video/mp4" />
回答by shihab
use both format it works fine in all browser:
使用这两种格式它在所有浏览器中都可以正常工作：
<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>
回答by KIshorekumar SP
Video not playing in server because the mime type is not added in IIS.
视频未在服务器中播放，因为 IIS 中未添加 MIME 类型。
To add Mime Type :
添加 Mime 类型：
? Go to IIS and select your site
? 转到 IIS 并选择您的站点
? Click Mime Types Under menu and click Add on right side tab
? 单击菜单下的 Mime 类型，然后单击右侧选项卡上的添加
? Under File Name Extension add mp4,under Mime type add video/mp4 and click Ok.
? 在文件扩展名下添加 mp4，在 Mime 下键入添加视频/mp4，然后单击确定。
? Restart IIS ,Now run the application
? 重新启动 IIS，现在运行应用程序
回答by Karthik
I faced the same issue now. I am getting the srcof the video dynamically and asynchronously using ajax.
我现在面临同样的问题。我正在src使用 ajax 动态和异步地获取视频。
The issue was that the <video>element was getting loaded before the src. If we put the <video>element into the DOM after the srcis loaded then the issue will get fixed.
问题是<video>元素在src. 如果我们<video>在src加载后将元素放入 DOM 中，那么问题将得到解决。
In case of Angular we can use *ngIfto fix the issue. Below is Angular code snippet:
在 Angular 的情况下，我们可以*ngIf用来解决这个问题。下面是 Angular 代码片段：
<video autoplay *ngIf="src" class="thumbnail">
<source [src]="src" [type]="type">
</video>
回答by A. Wentzel
If your type of video is MP4 running on IIS/.NET
如果您的视频类型是在 IIS/.NET 上运行的 MP4
Add a web.config file to the root of the application web.configwith the following contents
将 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>
回答by Youkko
I got this problem when hosting on IIS, and found the solution Here. In my case, even putting complete video URL on Chrome would give me 404 error, because the MP4 MIME type didn't exist on site config. So, I added .mp4 with MIME video/mp4, and all got right. Dunno if that's the same with tomcat, but that's worth a try...
我在 IIS 上托管时遇到了这个问题，并在这里找到了解决方案。就我而言，即使在 Chrome 上放置完整的视频 URL 也会给我 404 错误，因为站点配置中不存在 MP4 MIME 类型。所以，我添加了 .mp4 和 MIME 视频/mp4，一切顺利。不知道这是否与 tomcat 相同，但值得一试......
回答by Aiyoub Amini
add autoplay loopto video tag for play automatically as follows:
添加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>
回答by Humoyun Ahmad
Just set controls as a flag, not as a key=value pair:
只需将控件设置为标志，而不是键=值对：
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="resources/sample/sample1.m4v" type="video/mp4" />
</video>
</body>
</html>
