HTML 5 Video 标签不适用于任何浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23613054/
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
HTML 5 Video tag not working for any browser
提问by Naterade
So I used AnyConverter do convert a .movto .mpf, .ogvand .webmformats. I then put them in a video directory and used the following code
所以我使用 AnyConverter 将 a 转换.mov为.mpf,.ogv和.webm格式。然后我将它们放在视频目录中并使用以下代码
<video width="500" height="281">
<source src="/video/video.mp4" type="video/mp4" />
<source src="/video/video.ogv" type="video/ogg" />
<source src="/video/video.webm" type="video/webm" />
</video>
However, the video does not show in Sarari, Chrome or Firefox newest versions. I'm using the HTML 5 Doctype and not sure what is happening. Any suggestions?
但是，该视频不会在 Sarari、Chrome 或 Firefox 最新版本中显示。我正在使用 HTML 5 Doctype，但不确定发生了什么。有什么建议？
EDIT
编辑
Odd, I changed the path to the full url and it still did not work. Then when I pasted the url in Firefox the video played. I wonder if its something outside of the video tag...
奇怪的是，我更改了完整 url 的路径，但它仍然不起作用。然后当我在 Firefox 中粘贴 url 时，视频播放了。我想知道它是否在视频标签之外......
回答by Neha Shah
Make sure your path is correct for video files. rest of the code is fine
确保视频文件的路径正确。其余的代码很好
Add Controls Attribute on Video Tag like: Here is the full reference http://www.w3schools.com/html/html5_video.asp
在视频标签上添加控件属性，例如：这是完整的参考http://www.w3schools.com/html/html5_video.asp
<video width="500" height="281" controls>
<source src="/video/video.mp4" type="video/mp4" />
<source src="/video/video.ogv" type="video/ogg" />
<source src="/video/video.webm" type="video/webm" />
</video>
回答by Siva Charan
Add controlsattribute on video node
controls在视频节点上添加属性
Example:
例子：
<video width="500" height="281" controls>
...
...
</video>
回答by Arnaud Leyder
What you indicated in your edit seems to point towards a mime types issue. I have summarized some common troubleshooting steps with HTML5 video playback in this answer.
您在编辑中指出的内容似乎指向 mime 类型问题。我在这个答案中总结了一些关于 HTML5 视频播放的常见故障排除步骤。
There are 3 things to check:
有3件事要检查：
- make sure your video files are properly encoded for web delivery
- make sure the server where the videos are hosted is properly configured for web delivery
- make sure your others scripts on the page do not interfere with video playback
- 确保您的视频文件正确编码以进行网络传输
- 确保托管视频的服务器已正确配置为 Web 交付
- 确保页面上的其他脚本不会干扰视频播放
Let us know if it works.
让我们知道它是否有效。
回答by ndhruvit cool
First you have to check that in your video name there is space between words or not.if so,then remove it because of space will not allow you to play that video.
首先，您必须检查视频名称中单词之间是否有空格。如果有，请将其删除，因为空格将不允许您播放该视频。
回答by Wasiu
<video width="500" height="281" controls>
<source src="/video/video.mp4" type="video/mp4" />
<source src="/video/video.ogv" type="video/ogg" />
<source src="/video/video.webm" type="video/webm" />
</video>
it will still render as audio because mp4 is still not fully supported.
To solve this problem, place the currently supported format at the top.
like this:
<video width="900" height="600" controls>
<source src="/video/video.webm" type="video/webm">
<source src="/video/video.ogg" type="video/ogg">
<source src="/video/video.mp4" type="video/mp4">
</video>