MP4 plays when accessed directly, but not when read through PHP, on iOS

Question

I use a PHP script to validate video requests before serving them. This script works as expected on the desktop, with Safari and Chrome. But on iOS, I get a broken play button.

I'm sure the video is properly encoded for iPhone/iPad, because when I access it directly, it works as expected.

The relevant PHP code:

$file_name = 'test-video.mp4';
$file_size = (string)(filesize($file_name));
header('Content-Type: video/mp4');
header('Content-Length: '.$file_size);
readfile_chunked($file_name);
exit;

(readfile_chunked() is similar to readfile() but for very large files, found in the comments on the PHP manual page: http://php.net/manual/en/function.readfile.php. In any event, test-video.mp4 is only ~5 MB, which is less than the memory limit — and in this case I actually can substitute in the normal readfile() and produce the exact same behavior.)

The headers I get when I access test-video.mp4 directly are:

Accept-Ranges:bytes
Connection:Keep-Alive
Content-Length:5558749
Content-Type:video/mp4
Date:Sun, 27 Jun 2010 21:02:09 GMT
Etag:"1c04757-54d1dd-489944c5a6400"
Keep-Alive:timeout=10, max=30
Last-Modified:Tue, 22 Jun 2010 01:25:36 GMT
Server:Apache/2.2.15 (CentOS) mod_ssl/2.2.15 0.9.8l DAV/2 mod_auth_passthrough/2.1 FrontPage/5.0.2.2635

The headers from the PHP script are:

Connection:Keep-Alive
Content-Disposition:inline; filename="test-video.mp4"
Content-Length:5558749
Content-Type:video/mp4
Date:Sun, 27 Jun 2010 21:03:32 GMT
Keep-Alive:timeout=10, max=15
Server:Apache/2.2.15 (CentOS) mod_ssl/2.2.15 0.9.8l DAV/2 mod_auth_passthrough/2.1 FrontPage/5.0.2.2635
X-Powered-By:PHP/5.2.13

I've tried many different permutations of headers, even matching them exactly to those from a direct request, to no avail.

Has anyone had success serving HTML5 video through PHP, on iOS?

[Note: I would try using X-Sendfile, but the site is on a shared host with very limited access.]

EDIT: I was reading that iOS can be sensitive about file extensions, so I tried setting up a RewriteRule that rewrites MP4 requests back to my original PHP script, but that didn't help either.

Answer 1

Try:

$arquivo_caminho = 'path\file'

    if (is_file($arquivo_caminho)){
        header("Content-type: video/mp4"); // change mimetype

        if (isset($_SERVER['HTTP_RANGE'])){ // do it for any device that supports byte-ranges not only iPhone
            rangeDownload($arquivo_caminho);
        } else {
            header("Content-length: " . filesize($arquivo_caminho));
            readfile($arquivo_caminho);
        } // fim do if
    } // fim do if

    function rangeDownload($file){
        $fp = @fopen($file, 'rb');

        $size   = filesize($file); // File size
        $length = $size;           // Content length
        $start  = 0;               // Start byte
        $end    = $size - 1;       // End byte
        // Now that we've gotten so far without errors we send the accept range header
        /* At the moment we only support single ranges.
         * Multiple ranges requires some more work to ensure it works correctly
         * and comply with the spesifications: http://www.w3.org/Protocols/rfc2616/rfc2616-sec19.html#sec19.2
         *
         * Multirange support annouces itself with:
         * header('Accept-Ranges: bytes');
         *
         * Multirange content must be sent with multipart/byteranges mediatype,
         * (mediatype = mimetype)
         * as well as a boundry header to indicate the various chunks of data.
         */
        header("Accept-Ranges: 0-$length");
        // header('Accept-Ranges: bytes');
        // multipart/byteranges
        // http://www.w3.org/Protocols/rfc2616/rfc2616-sec19.html#sec19.2
        if (isset($_SERVER['HTTP_RANGE'])){
            $c_start = $start;
            $c_end   = $end;

            // Extract the range string
            list(, $range) = explode('=', $_SERVER['HTTP_RANGE'], 2);
            // Make sure the client hasn't sent us a multibyte range
            if (strpos($range, ',') !== false){
                // (?) Shoud this be issued here, or should the first
                // range be used? Or should the header be ignored and
                // we output the whole content?
                header('HTTP/1.1 416 Requested Range Not Satisfiable');
                header("Content-Range: bytes $start-$end/$size");
                // (?) Echo some info to the client?
                exit;
            } // fim do if
            // If the range starts with an '-' we start from the beginning
            // If not, we forward the file pointer
            // And make sure to get the end byte if spesified
            if ($range{0} == '-'){
                // The n-number of the last bytes is requested
                $c_start = $size - substr($range, 1);
            } else {
                $range  = explode('-', $range);
                $c_start = $range[0];
                $c_end   = (isset($range[1]) && is_numeric($range[1])) ? $range[1] : $size;
            } // fim do if
            /* Check the range and make sure it's treated according to the specs.
             * http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html
             */
            // End bytes can not be larger than $end.
            $c_end = ($c_end > $end) ? $end : $c_end;
            // Validate the requested range and return an error if it's not correct.
            if ($c_start > $c_end || $c_start > $size - 1 || $c_end >= $size){
                header('HTTP/1.1 416 Requested Range Not Satisfiable');
                header("Content-Range: bytes $start-$end/$size");
                // (?) Echo some info to the client?
                exit;
            } // fim do if

            $start  = $c_start;
            $end    = $c_end;
            $length = $end - $start + 1; // Calculate new content length
            fseek($fp, $start);
            header('HTTP/1.1 206 Partial Content');
        } // fim do if

        // Notify the client the byte range we'll be outputting
        header("Content-Range: bytes $start-$end/$size");
        header("Content-Length: $length");

        // Start buffered download
        $buffer = 1024 * 8;
        while(!feof($fp) && ($p = ftell($fp)) <= $end){
            if ($p + $buffer > $end){
                // In case we're only outputtin a chunk, make sure we don't
                // read past the length
                $buffer = $end - $p + 1;
            } // fim do if

            set_time_limit(0); // Reset time limit for big files
            echo fread($fp, $buffer);
            flush(); // Free up memory. Otherwise large files will trigger PHP's memory limit.
        } // fim do while

        fclose($fp);
    } // fim do function

Answer 2

If you are handling it yourself like that, then you will need to handle byte-range requests yourself as well.

Answer 3

Please note that this is code (https://mobiforge.com/design-development/content-delivery-mobile-devices) is a lifesaver. However be on the lookout for the line

"if ($range{0} == '-'){" or "if ($range0 == '-'){"

it should be

if ($range[0] == '-'){

This typo resulted in a very long time figuring out why it did not work.

Answer 4

As was stated above to stream or playback MP4 videos using PHP, you will need to handle byte ranges if you want proper playback on Safari and iOS.

rangeDownload() function mentioned in the previous answers does the job pretty well.

I want to mention another piece of this puzzle - make sure the source in the video ends with .mp4 as in <video source="url/yourfile.php/referenceForFile.mp4">. This makes browser thing that it is a video file, and it starts treating it as one.

Inside yourfile.php, you could grab the incoming reference for your file using $_SERVER['PATH_INFO'] or within REQUEST_URI. No need to pass it as a ?id=someId.mp4, direct slash approach looks more like a real file.

To sum up, from my experience to serve a video file from PHP correctly you will need:

• Byte range support. Browser tells server which part of the file it needs, and the server needs to respond with that byte range content.
• Have your moov atom at the beginning of the file (you could use ffmpeg's -movflags +faststart or MP4Box)
• <video source="...file.mp4"> Source attribute of video tag needs to look like an .mp4 file. Without this my videos were only playing in Chrome and not in Safari/iOS.
• Direct HTML5 player, or you can use a library like videojs

I wrote this based on my experience with serving thousands of videos on my music video website. While this might not be the case for all, but I found this cross-browser and cross-device setup work as expected.