Apache + HTML5 视频标签 - 会出啥问题？
Posted
技术标签:
【中文标题】Apache + HTML5 视频标签 - 会出啥问题？【英文标题】：Apache + HTML5 Video Tag - What could go wrong?Apache + HTML5 视频标签 - 会出什么问题？ 【发布时间】：2012-02-03 00:31:10 【问题描述】：[查看更新！ - 适用于 android/ios 浏览器，但不适用于其他浏览器。 FireFox、Chrome、Opera、Safari 都失败了。即使它们肯定已经准备好 html5 视频标签]
只需尝试使用 html5 标记流式传输视频。我得到的只是视频播放器控件，没有别的。这很简单，我认为它应该可以工作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Movie title</title>
</head>
<body>
<video id="movie" preload controls>
<source src="test.mp4" />
</video>
</body>
那么我哪里出错了？除了这个小sn-p，我已经尝试了很多。我试过其他人的例子 sn-ps。我试过很多视频，很多格式（mp4、flv、ogg）。我试过在 Chrome、Firefox、Android Embedded 浏览器、Opera、IE9 中查看。
我可以在 VLC 等程序中从 URL 流式传输文件，而不会出现任何问题。
我开始认为 Apache2 可能是这里的问题，尽管我认为我可以毫无问题地从 VLC 流式传输 URL 这一事实表明 Apache2 不是问题。
任何帮助表示赞赏。我在这里拉头发。
更新：
每当我尝试从 Chrome 中访问视频目录的 URL 时，似乎都会出现以下错误：资源解释为其他，但传输的 MIME 类型未定义
那个错误肯定是服务器端的问题，apache2一定没有配置好？
如果我从我的 Apache2 服务器中的 URL 访问一个 FLV 文件目录，它会给出这个 MIME 类型未定义的错误。它是视频控件。每当我单击播放时，它都会向未定义的 MIME 类型发送几次垃圾邮件。
更新2：
验证我的 .htaccess 正在被读取
在我的 .htaccess 中添加了以下内容：
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
仍然无法正常工作，仍然在 Chrome 中看到 MIME TYPE UNDEFINED。
更新3：
Firefox 和其他人可以毫无问题地查看 URL/test.mp4，但 NONE 可以使视频标签正常工作。更新4：
Android 现在可以让视频标签工作。 .htaccess 更改似乎解决了这个问题。但是，无论出于何种原因，没有一个桌面浏览器可以。【问题讨论】：
我唯一能看到的是缺少 HTML 结束标记，而preload controls 似乎不在规范中。即预加载似乎需要三个参数“auto|metadata|none”中的一个。
我删除了预加载命令，没有区别。似乎 CHROME 无法直接从 URL/test.mp4 流式传输 mp4。但是其他浏览器可以，例如 FireFox。所以现在我觉得我好像回到了第一步，视频标签就是问题所在。
好的，刚刚复制了你的设置，它在我所有的浏览器中都能很好地播放，我从以下网址下载了一个 webm 剪辑：camendesign.com/code/video_for_everybody/test.html。我的 apache 设置是 vanilla，通过 apt-get 安装，从未修改过全局配置文件，public_html 内没有 .htaccess 等等。我在视频标签中添加了controls="controls"。
你在哪个浏览器中测试过？
chromium（和 google-chrome）、opera 和 firefox
【参考方案1】：
这是来自我的网站 www.pi-corp.net 的 html 代码。这允许在所有商业浏览器上播放并回退到 Flash。
<div class="video-js-box" style="width: 316px"><br><video class="video-js" controls preload autoplay poster="http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png"><source src="http://pi-corp.net/picvideo/PIChmi.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><source src="http://pi-corp.net/picvideo/PIChmi.ogv" type='video/ogg; codecs="theora, vorbis"' /><source src="http://pi-corp.net/picvideo/PIChmi.webm" type='video/webm; codecs="vp8, vorbis"' />
<object id="flash_fallback_1" class="vjs-flash-fallback" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf"><div class="style23"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config="playlist":["http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png", "url":"http://pi-corp.net/picvideo/PIChmi.mp4
","autoPlay":true,"autoBuffering":true]' /> <img src="http://pi-corp.net/images/PIC_no_playback.png"
title="No video playback capabilities." /> </div> </object></video>
【讨论】：
【参考方案2】：Firefox 和 Opera 不支持 MP4，Chrome 很快就会放弃对它的支持。最好也添加一个 WebM 源。
尝试将type 属性添加到source 声明中：
<source src="test.mp4" type="video/mp4">
【讨论】：
虽然添加类型并没有改变任何东西。使用 ffmpeg 转换为 WEBM 似乎可以解决所有问题。 Chrome、Opera、Firefox 现在都可以完美查看了。然而，Android 浏览器似乎无法与 WEBM 一起使用。所以我添加了两个源标签，一个是 webm，另一个是 mp4。这似乎解决了它。不幸的是，我必须保留每个视频的两份副本。无论如何围绕这个？ 恐怕不行，你可以责怪某些公司不同意他们都支持的视频格式。最初 HTML5 规范强制支持 OGG（用于音频和视频），但苹果和诺基亚抱怨，所以它被放弃了。无论如何，您仍然需要用于 Safari 和 IE9 的 MP4。以上是关于Apache + HTML5 视频标签 - 会出啥问题？的主要内容，如果未能解决你的问题，请参考以下文章