HTML 5 Video Playback not working on iPhone (Chrome and Safari)

Question

I'm trying to implement basic HTML5 playback for video on a simple webpage I'm building.

Really, no fancy stuff. Not even the example is working.

<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script src="//vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>

<video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" />
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>

I get the following error: The media could not be loaded, either because the server or network failed or because the format is not supported Am I missing something with regards to IOS and HTML5 Video playback?

======= UPDATE A)

After running some more tests. I've discovered the following:

1. It doesn't work on iPhone at all (Chrome and Safari)
2. It doesn't work on Macbook Safari but does on Firefox

======= UPDATE B)

After some more tests and diving a bit more into Apple's video encoding guidelines and requirements, I have discovered the following:

This video works: <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />

This one does not: <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>

Since they're both detached from my local server I can only conclude that it is one of 2 things:

1. A Header Issue
2. An encoding Issue

I can't fetch the encoding details for: http://video-js.zencoder.com/oceans-clip.mp4 because it seems like they're forbidding headless requests (neither wget nor ffmpeg -i are allowed to connect).

However I did re-encode an existing mp4 video using the following ffmpeg configuration: fmpeg -i input.mp4 -vcodec libx264 -profile:v main -level 3.1 -preset medium -crf 23 -x264-params ref=4 -acodec copy -movflags +faststart ouput.mp4

No luck. ffmpeg -i does reveal the encoder to be h264 on output.mp4 but the video still refuses to play on iOS devices.

======= UPDATE C)

After changing the video codec scaling the video and adjusting the bitrate to apple's requirements: ffmpeg -i input.mp4 -vcodec libx264 -profile:v main -level 3.0 -preset medium -crf 23 -x264-params ref=4 -acodec copy -vf scale=640x480 -maxrate 900k -bufsize 900k -movflags +faststart output.mp4 ... and after writing a range request streaming script adding the Accept-Ranges (Apparently a requirement for apple see: this) header, which works brilliantly, here's the curl output for: curl --range 0-50 http://localhost:8000/video/5a2fd7b4e13823117a1b3ea4 -o /dev/null

curl --range 0-50 http://localhost:8000/video/5a2fd7b4e13823117a1b3ea4 -o /dev/null
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0 7871k    0    51    0     0     51      0 43:54:14 --:--:-- 43:54:14   237
curl: (18) transfer closed with 8060705 bytes remaining to read

... and after bashing my head about 400 times against the wall in desperate attempt to alleviate the pain (to no avail), I'm about 99.5% sure that it's some weird apple certification / video formatting issue.

Answer 1

Alright so the big issue was request headers. So there are few headers that are required by apple to successfully stream.

Apple will make a pre-request to the supplied URI looking for the following information (I will list the headers required)

1. Content-Type - Goes without saying it needs to know it's about to parse video, this would be video/mp4 or whichever video format is used.
2. Accept-Ranges - This should be a range from 0 to the size of the video being streamed .e.g: 0-123456 bytes
3. Content-Length - This is the total size of the file in bytes e.g.: 123456

Then on every subsequent request, you want to omit the content-length header and just send it it's requested range using the Content-Range header.

The reason certain external videos were working and others were not was because it was indeed a header issue. The one server doesn't send the Accept-Ranges header and doesn't support ranged requests, and Safari / IOS Browser just gives up.

Also, they seem to be a bit more laxed about their video encoding standards. Some answers and suggestions out there would recommend adjusting bit rates and resolutions on H.264 encoding, as long as it's H.264 Video encoding and ACC Audio Encoding (is pretty standard stuff, ffmpeg usually encodes to H.264 and ACC by default) you should be fine. More info on Apple's supported encoders here

Final thoughts: This is actually pretty straight forward, and if you're hitting this thread, I really hope it helps you out or at least points you in the right direction.