HTML5视频无法在任何浏览器中使用 [英] HTML5 video not working in any browser

问题描述

我在这里找到了同样问题的其他帖子，例如 this 或这个但我无法解决我的问题。
首先，我在javascript以下运行：

I found other posts here for the same issue, like this or this but I wasn't able to solve my issue. At first, I run below javascript:

<script type="text/javascript">
    var options = JSON.stringify({'maxSize': 320, 'videoQuality': 6, 'noaudio': true});
    ogg.encode(options);
</script>

然后我有以下html：

Then I have below html:

<video id="video1" width="500" controls="controls" >
    <source src="Rio2Trailer.mp4" type="video/mp4"/>
    <source src="Rio2Trailer.ogv" type="video/ogg"/>
    <source src="Rio2Trailer.webm" type="video/webm" />
    The browser does not support HTML5 video.
</video>

我尝试添加

AddType video/webm .webm
AddType video/mp4 .mp4

到.htaccess文件（它是空的）但没有成功。

to the .htaccess file(which was empty) but no success.

在Firefox上，我收到消息：

On Firefox, i get the message:

找不到支持格式和MIME类型的视频。

No video with supported format and MIME type found.

在Chrome上，我只能看到控件，但它们看起来像是被禁用了，我也没有看到屏幕中间的播放按钮。

On Chrome, I can just see the controls but they look like they are disabled and I don't see the play button in the middle of the screen as well.

推荐答案

播放HTML5视频可能会非常棘手。有三件事需要检查：

Playing HTML5 video can be tricky. There are 3 things to check for:

• 检查您的MP4文件是否已正确编码以进行网络传送。您可以尝试使用手刹或MP4Box或ffmpeg重新包装您的文件。您需要使用手刹激活web optimized选项（也称为快速启动）。


• 检查您的服务器配置：对于mime类型看看这里MIME类型后面的丑陋头。尝试在配置更改后重新启动Apache服务器。如果它在.htaccess中不起作用，请尝试使用您的站点范围的httpd.conf。其他要检查的内容包括CORS和206部分内容/范围请求


• 检查您的脚本/ HTML5：使用您的mp4在空白页中尝试准系统HTML5视频标记。如果它有效，那么页面中的脚本可能会影响视频播放。您还可以在播放全高清视频时检查CPU负载。

• check your MP4 files is properly encoded for web delivery. You can try to use handbrake or MP4Box or ffmpeg to repack your file. You need to activate the "web optimized" option (aka fast start) with handbrake.
• check your server config: for mime types have a look here section "MIME Types Rear Their Ugly Head". Try to restart your Apache server after the changes in config. If it does not work in .htaccess try your site-wide httpd.conf. Other things to check includes CORS and 206 Partial Content/Range Requests
• check your script/HTML5: try a barebone HTML5 video tag in a blank page with your mp4. If it works then scripts in your page may be affecting video playback. You can also check CPU load when playing back full HD videos.

我通常使用 videojs mp4 sample 作为已知工作mp4 / server配置的参考。这适用于mp4，但也适用于webm / ogg（您可以使用制作网络视频进行转码，以便转码为WebM或Ogg ）。

I normally use videojs mp4 sample as a reference for a known working mp4/server config. This applies to mp4 but for webm/ogg as well (you can use make web video for transcoding to WebM or Ogg).

让我们知道它是怎么回事。

Let us know how it goes.

这篇关于HTML5视频无法在任何浏览器中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！