什么是嵌入了iPhone的MP4，而无需使用JavaScript的最好方法？

StackOverflow https://stackoverflow.com/questions/958899

  •  12-09-2019
  •  | 
  •  

题

我试图解决此代码，并正在运行到一个死胡同，所以我想我会在这里问我的第一个问题。我有三个问题：

1）什么是嵌入一个MP4为iPhone特定视图，优选不使用Javascript的最佳方法？

2）是否有任何优选的做法调试代码在iPhone上？

3）谁能告诉我什么是错的我下面具体的代码？我要提到的前期变量$文件名确实包含正确的信息，我只是省略了它的一部分代码。此外，广告图像不闪烁的一瞬间我收到灰色的，坏了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手机不支持影片直接嵌入在一个网站的文件。

点击该链接就会打开用户的iPhone QuickTime的，然后将它们返回的网页他们完成时。

即使嵌入作品，链接的图像将是更容易记住：

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

其他提示

与OS 3.0开始可以使用<VIDEO>标签

尽管普遍的误解，可以使用一个第二对象标记，而不是嵌入标记，同时改变参数的元件和使用类型=“视频/ QuickTime的”。其结果将是相同的几乎所有的浏览器（我还没有看到一个问题，虽然有人告诉我IE6螺丝它），页面将验证。 iPhone上的结果会比在桌面浏览器略有不同。除非你明确地设置海报框架，它会使用一个黑色。它也将提上张贴框顶部它自己的播放按钮。 （如果有人知道如何禁用这类原因，我很想知道如何）通过这样做，可以做整个事情没有任何JavaScript的。如果你想看到一个例子，在这里一个是： HTTP：// WWW。 cdjunior.com/CD_JR/view.php?name=jehovahs_witnesses 的。源的培训相关的部分是线94-100。我不知道你是否可以使用嵌入标记，并使其发挥作用。现在我想起来了，我想这可能是苹果的Javascript是怎么做的。

以下是对AlBeebe提及（HTML 5 video标签）的实施方式。

这将需要一个MP4和其嵌入的 iPhone帧而不JS内部。然而，的你可能会碰到的问题调整的，所以为您的min-width: 758px;一个body。

调整与如果事情是不对准的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;
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top