Was ist der beste Ansatz, ohne Verwendung von JavaScript mp4 für das iPhone einzubetten?

Question

Ich versuche, diesen Code zu beheben und in eine Sackgasse laufen lasse, so dass ich dachte, ich würde hier meine erste Frage stellen. Ich habe drei Fragen:

1) Was ist der beste Ansatz, um einen mp4 für ein iPhone spezifische Ansicht einzubetten, vorzugsweise ohne Javascript zu verwenden?

2) Gibt es bevorzugte Praktiken zu Debug-Code auf einem iPhone?

3) Kann mir jemand sagen, was mit meinem spezifischen Code unten ist falsch? Ich sollte im Voraus erwähnen, dass die Variable $ filename in der Tat die richtigen Informationen enthält, habe ich nur diesen Teil des Codes weggelassen. Auch dann, wenn das Plakatbild Flimmern für einen kurzen Moment, bevor ich das abgeblendet, gebrochene Quicktime Bild erhalten, so dass ist ein Hinweis darauf, dass dies teilweise arbeiten.

---

Code:

<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>

Answer 1

Sie haben es nicht einbetten, verknüpfen Sie es. Normalerweise ist die Verbindung ein Miniaturbild aus dem Video selbst. iPhones unterstützen keine Einbettung von Film direkt in eine Website-Dateien.

Klick auf den Link öffnet sich Quicktime auf dem iPhone Benutzer, dann bringt sie auf die Webseite, wenn sie fertig sind.

Auch wenn einzubetten Werke, ein verknüpftes Bild leichter sein wird, sich zu erinnern:

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

Answer 2

Ab OS 3.0 können Sie die <VIDEO>-Tag

Answer 3

Trotz verbreiteten Irrtum, können Sie einen zweiten Objekt-Tag anstelle der embed-Tags verwenden, während der Parameter auf den Elemente zu ändern und mit type = „video / quicktime“. Das Ergebnis wird das gleiche auf praktisch allen Browsern (Ich habe noch ein Problem zu sehen, obwohl ich IE6 Schrauben es wird erzählt nach oben), und die Seite validieren. Das Ergebnis auf dem iPhone wird ein wenig anders als auf Desktop-Browser sein. Es sei denn, Sie explizit einen Posterrahmen gesetzt ist, wird es ein schwarzes verwenden. Es wird auch seine eigene Play-Taste auf der Oberseite des Plakatrahmen setzen. (Wenn jemand weiß, wie entweder von denen zu deaktivieren, würde ich gerne wissen, wie) Auf diese Weise kann man das Ganze bei allen Produkten ohne Javascript. Wenn Sie ein Beispiel sehen möchten, hier ist: http: // www. cdjunior.com/CD_JR/view.php?name=jehovahs_witnesses . Der relevent Teil der Quelle ist Linien 94-100. Ich weiß nicht, ob Sie ein embed-Tags verwenden können und damit es funktioniert. Nun, da ich daran denke, ich denke, das kann sein, wie das Apple Javascript tut es.

Answer 4

Hier ist eine Implementierung von dem, was AlBeebe erwähnte (HTML 5 video-Tag).

Dies wird eine mp4 nehmen und bettet es in einem iPhone Rahmen ohne JS. Allerdings Sie werden wahrscheinlich in Ändern der Größe Probleme laufen , so eingestellt, dass eine min-width: 758px; für Ihre body.

Stellen Sie mit der video Koordinaten, wenn die Dinge falsch ausgerichtet sind.

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;
}