在不使用 JavaScript 的情况下为 iPhone 嵌入 mp4 的最佳方法是什么？答案

【问题标题】：What is the best approach to embed mp4 for the iPhone without using JavaScript?在不使用 JavaScript 的情况下为 iPhone 嵌入 mp4 的最佳方法是什么？
【发布时间】：2009-06-06 03:08:30
【问题描述】：

我正在尝试对这段代码进行故障排除并且遇到了死胡同，所以我想我会在这里问我的第一个问题。我有三个问题：

1) 为 iPhone 特定视图嵌入 mp4 的最佳方法是什么，最好不使用 Javascript？

2) 是否有在 iPhone 上调试代码的首选做法？

3) 谁能告诉我下面的具体代码有什么问题？我应该提前提到变量 $fileName 确实包含正确的信息，我只是省略了那部分代码。此外，在我收到灰显、损坏的 QuickTime 图像之前，海报图像确实闪烁了片刻，这表明这部分工作正常。

代码：

<object width="448" height="335" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
    <param name="src" value="/libraries/images/$fileName.jpg" />
    <param name="href" value="/libraries/media/$fileName.mp4" />
    <param name="target" value="myself" />
    <param name="controller" value="true" />
    <param name="autoplay" value="false" />
    <param name="scale" value="aspect" />
    <embed src="/libraries/images/$fileName.jpg" href="/libraries/media/$fileName.mp4" type="video/mp4" target="myself" width="448" height="335" scale="aspect" controller="false" autoplay="false"> </embed>
</object>

【问题讨论】：

标签： iphone embed quicktime mp4

【解决方案1】：

你没有嵌入它，你链接到它。通常，链接是视频本身的缩略图。 iPhone 不支持直接在网站中嵌入电影文件。

单击该链接将在用户的 iPhone 上打开 Quicktime，然后在完成后将其返回到网页。

即使嵌入有效，链接的图像也会更容易记住：

<a href="/libraries/media/$filename.mp4"><img src="/libraries/images/$filename.jpg" width="448" height="335" /></a>

【讨论】：

谢谢，这是一个很好的区分。上面的代码显示了海报图片，然后点击打开 quicktime 播放器。我实际上刚刚解决了这个问题，然后又回来发帖了。一旦我想起我的 .htaccess 文件，上面的代码确实没问题。问题实际上是我正在通过 .htaccess 过滤某些文件类型，不幸的是，我没有将 .mp4 文件类型添加到我的文件列表中以允许通过。因此，它显示了一个损坏的快速视频链接。愚蠢的错误。

【解决方案2】：

从 OS 3.0 开始，您可以使用 <VIDEO> 标签

【讨论】：

【解决方案3】：

尽管有一个常见的误解，您可以使用第二个对象标签而不是嵌入标签，同时将参数更改为元素并使用 type="video/quicktime"。结果在几乎所有浏览器上都是相同的（我还没有看到问题，尽管有人告诉我 IE6 搞砸了），并且页面将验证。 iPhone 上的结果与桌面浏览器上的结果略有不同。除非您明确设置海报框架，否则它将使用黑色框架。它还将自己的播放按钮放在海报框架的顶部。（如果有人知道如何禁用其中任何一个，我很想知道如何）通过这样做，您可以在没有任何 Javascript 的情况下完成整个事情。如果你想看一个例子，这里是：http://www.cdjunior.com/CD_JR/view.php?name=jehovahs_witnesses。源代码的相关部分是第 94-100 行。我不知道您是否可以使用嵌入标签并使其工作。现在回想起来，我想这可能就是 Apple Javascript 的做法。

【讨论】：

【解决方案4】：

这是 AlBeebe 提到的一个实现（HTML 5 video 标记）。

这将采用 mp4 并将其嵌入到 iPhone frame 中，无需 JS。但是，您可能会遇到调整大小的问题，因此请为您的 body 设置一个 min-width: 758px;。

如果未对齐，请使用video 坐标进行调整。

HTML

<div id='photo'>
   <div id='phone'>
      <img src='img/phone-border.png'/>
      <video src='img/cloud.mp4' autoplay loop width="209" height="370" poster="img/first-frame.png"/>
   </div>
</div>

CSS

#phone {
   position: relative;
}
#phone img {
   width: 300px;
   height: auto;
}
#phone video {
   position: absolute;
   width: 209px;
   height: 370px;
   top: 50%;
   left: 50%;
   margin-left: -182px;
   margin-top: -185px;
}

【讨论】：