mov 或 m4v 视频嵌入（通过 php 从 mysql 数据库检索的数据）

Question

我正在为一家希望能够上传位置侦察和选角视频的广告制作公司设计一个网站。我已经想出了如何从 sql 中获取数据并使用正确的标题进入浏览器。

现在我的问题是 - 目前显示视频的最佳方式是什么。我需要它在 iPhone、iPad、Safari 和 Firefox 上工作。我根本不关心 IE。

如果有帮助，我不介意将他们限制为仅以一种视频格式上传。意思是 Quicktime 仅 .mov 或 .m4v 仅适用于任何工作。无法使用 Flash，因为涉及 iPhone 和 iPad。

我也可以使用不同的代码来适应每个不同的浏览器。我只需要知道哪种方法最适合哪个平台/浏览器。

编辑：

我已经弄清楚如何在我关心的计算机浏览器（不包括 MSIE）中显示数据库中的视频。现在我需要弄清楚iPhone。为了测试，我将文件放入服务器的文件系统，它们都通过 html5 视频标签从那里播放。所以 iPhone 能够播放剪辑的格式。问题显然是将该数据从 mySQL 传递到 iPhone... 目前，我的 php 文件检索二进制数据并将其发送到浏览器指定以下标头：

header("Content-length: $audioLength");  
header('Content-Range: bytes 0-'.$audioLength.'/'.$audioLength);  
header("Content-type: ".$mimeType);

其中 $audioLength 是上传时捕获的文件大小（以字节为单位）
$mimeType 是浏览器在上传时报告的 mime 类型 - 两个值都与二进制数据一起从数据库传递到 retrieve_audio.php 脚本。

可能还需要哪些其他标头？我如何找出从文件系统获取文件与从数据库获取文件之间的区别？

问题是否可能是 iPhone 在您按下播放按钮之前不会检索数据？作为最后的手段，我可​​以让 PHP 代码将文件写入文件系统，但这是我希望避免的数据重复，如果可能的话......

谢谢，

M

Answer 1

查看http://diveintohtml5.ep.io/video.html，了解有关 HTML5 视频和不同格式的重要信息。

简化的简短回答：Firefox 4 支持 Ogg (Theora/Vorbis) 和 WebM； Safari（桌面和移动）支持 MP4 (H.264/AAC)。尝试使用 HTML5 <video> 标记，如下所示：

<video width="320" height="240" controls>
    <source src="pr6.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
    <source src="pr6.ogv"  type='video/ogg; codecs="theora, vorbis"'>
</video>

（来自上面链接的站点的示例。说真的，这是一本非常好的读物，它还将告诉您如何确保您的视频确实在 IE、Chrome 等中运行）

编辑如果您绝对只需要使用一种视频格式，最好的选择可能是带有 H.264 视频和 AAC 音频的 MP4/M4V。 Safari（桌面和移动）可以在<video> 标签中播放它，而 Firefox 将能够在 Flash 容器中播放它。这并不理想，因为我认为您必须做一些浏览器嗅探以确保 iOS 不支持 Flash 而 Firefox 支持，但您需要这样的东西：

<!-- Safari and iOS -->
<video width="320" height="240" poster="poster.jpg" controls>
    <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

<!-- Firefox / other -->
<object width="320" height="240" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
    <param value="player.swf">
    <param value="true" name="allowfullscreen">
    <param value="always" name="allowscriptaccess">
    <param value="file=video.mp4&amp;image=poster.jpg" name="flashvars">
    <embed
        width="320"
        height="240"
        flashvars="file=video.mp4&amp;image=poster.jpg"
        allowfullscreen="true"
        allowscriptaccess="always"
        src="player.swf"
        type="application/x-shockwave-flash"
    >
</object>

即使你走这条路，我仍然会阅读 Dive Into HTML5 页面，了解有关要使用的适当编解码器、如何编码视频以及需要注意的各种问题的更多信息。

Answer 2

不幸的是，没有一种格式可以在如此广泛的设备上运行良好。您需要采用上传的任何格式并将其转换为多种不同的格式。您可能想研究像http://www.livetranscoding.com/ 这样的服务来完成繁重的工作（注意，我没有使用他们的服务，我不知道是否有办法让它与非实时流一起使用）。