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"&gt;
    <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

If you use javascript you CAN embed the video, well sorta. Check out http://homepage.mac.com/qt4web/embedforiphone.html

What you want to look for is QT_WritePoster_XHTML which is really cool, it adds your custom thumbnail for the video, and overlays a nice Click Here to Play control. This is how you embed video for the iphone.

Answer 3

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

Answer 4

When I link to a .mp4 file (baseline profile, single pass, h.264, aac) it downloads as ascii text instead of playing in iPhone Quicktime. I checked my mime types and they are there. What am I doing wrong?

Answer 5

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.