Question

I have been trying to embed some videos on a website I am building, and have come across a snag when trying to stream the videos to iPhone/iPad.

Here’s the code I use:

<video  width="480" height="360" controls>
<source src="/video/Fire.mp4" type="video/mp4" />
</video>

This displays a thumbnail with a play button on it. However, the play button is crossed out. (The invalid codec button?)

I have ensured that the video has been properly encoded (MP4, H.264, baseline).

Any suggestions on what I’m doing wrong?

Answer 1

I’ve been having a similar problem. A few things to check off before you assume the codec is the problem:

• Ensure the server is sending the video file with the correct MIME type (video/mp4)
• The video’s bit rate is under ~2MBps, there is also a relationship with the max resolution you can use in conjunction with the bit rate.

I was also encoding mp4 video with the baseline profile using Adobe Media Encoder and could not get the video to play on an iPhone.

I used Miro Video Converter to convert from mp4 to mp4 and can now correctly play the video on an iPhone.

Obviously some part of the encoding I must be setting wrong from the Adobe software but I’m yet to pin it down.

If anyone else can chime in with there experience it would be appreciated.