What is the best approach to embed mp4 for the iPhone without using JavaScript?

Question

I am trying to troubleshoot this code and am running into a dead-end, so I thought I would ask my first question here. I have three questions:

1) What is the best approach to embed an mp4 for an iPhone specific view, preferably without using Javascript?

2) Are there any preferred practices to debug code on an iPhone?

3) Can anyone tell me what is wrong with my specific code below? I should mention upfront that the variable $fileName does indeed contain the correct info, I've just omitted that portion of the code. Also, the poster image does flicker for a brief moment before I receive the greyed out, broken QuickTime image so that is an indication that this is partially working.

---

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

You don't embed it, you link to it. Usually, the link is a thumbnail from the video itself. iPhones don't support embedding of movie files directly in a site.

Clicking the link will open Quicktime on the user's iPhone, then return them to the web page when they're done.

Even if embed works, a linked image is going to be easier to remember:

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

Answer 2

Starting with OS 3.0 you can use the <VIDEO> tag

Answer 3

Despite a common misconception, you can use a second object tag instead of the embed tag, while changing the parameters to elements and using type="video/quicktime". The result will be the same on practically all browsers (I have yet to see a problem, although I am told IE6 screws it up), and the page will validate. The result on iPhone will be a little different than on desktop browsers. Unless you explicitly set a poster frame, it will use a black one. It will also put it's own play button on top of the poster frame. (if anyone knows how to disable either of those, I would love to know how) By doing this, you can do the whole thing without any Javascript at all. If you want to see an example, here one is: http://www.cdjunior.com/CD_JR/view.php?name=jehovahs_witnesses. The relevent part of the source is lines 94-100. I don't know if you can use an embed tag and make it work. Now that I think of it, I think this may be how the Apple Javascript does it.

Answer 4

Here's an implementation of what AlBeebe mentioned (HTML 5 video tag).

This will take an mp4 and embed it inside an iPhone frame without JS. However, you will probably run into resizing problems, so set a min-width: 758px; for your body.

Adjust with the video coordinates if things are misaligned.

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