CODEWITHSUNDEEP
phpinternet-explorerhttp-caching
ToolmakerSteve
ToolmakerSteve

Reputation: 21243

IE not caching video (works in Chrome)

On an HTML page constructed using php + jsquery + javascript (e.g. index.php), a video tag has a source that is another php page, with a GET field specifying which video to load (e.g. "getfile.php?file=111").

Buttons switch which video is playing; e.g. javascript

var video = document.getElementById('flyover');
var source = video.getElementsByTagName('source')[0];
source.setAttribute('src', "getfile.php?file=222");

getfile.php emits HTTP headers, then fpassthru of file contents.

...
header('Content-Type: video/mp4');
header('Content-Disposition: attachment; filename='.basename($file->FileName));
header('Content-Transfer-Encoding: binary');
$seconds_to_keep = ...
header ("Expires: " . gmdate("D, d M Y H:i:s", time() + $seconds_to_keep) . " GMT");
header('Cache-Control: public, max-age=' . $seconds_to_keep);
header('Content-Length: ' . filesize($filename));

fpassthru($fp);
exit;

Fiddler proxy used to confirm headers:

#   Result  Protocol    Host    URL Body    Caching Content-Type
47  200 HTTP    ... /getfile.php?file=2639  10,113  public, max-age=31536000; Expires: Thu, 06 Aug 2015 20:20:30 GMT    video/mp4

Test actions:

  1. Load page
  2. Wait for video #1 to finish playing (And Fiddler updates Caching info from "-1" to "max-age / Expires" details)
  3. Push button for video #2
  4. Wait for video #2 to finish playing (And Fiddler updates Caching info)
  5. Push button for video #1

On Chrome, the result is that video #1 immediately starts playing (and buffering bar shows halfway loaded, which is the most I ever see at video start). Fiddler does NOT show a new "getfile" request to server.

On IE 11, there is a delay while video #1 buffers (and buffering bar shows zero loaded at video start). Fiddler DOES show a new "getfile" request to server.

IE's cache setting is "automatic". (Temporary Internet Files / Check for newer versions of stored pages = "Automatically"). Cache size is 250 mb, videos are ~ 6 mb each, and cache was emptied prior to start of testing.

Confirmed that URL is exactly the same (according to fiddler, and using alert pop-up in javascript).

Q: What else could affect IE's failure to cache these videos?

UPDATE

IMAGES, obtained via the same url, but with different query field fileid value, and different Content-Type header, ARE caching in IE: If quit browser, and restart browser, and go the the same page, Fiddler does not show any "/getfile.php?fileid=333" requests for those images. (It did show those requests the first time page was loaded after cache clear.)

The only change in php code executed (for images versus video) is a single if / else if statement, that controls what Content-Type header is emitted.

Perhaps it is IE 11's caching policy to not cache videos?

The logic does emit a Content-Length header with file size, and the client internet options cache (250 mbs) is much larger than the file size (6 mb), so it "should" be able to cache it. Disk space free is many GBs.

UPDATE #2

UPDATE #3

php code on server does NOT test for HTTP_IF_MODIFIED_SINCE; I'm not sending Last-Modified header. I was assuming maxage would be sufficient. It is possible that IE would be smarter about caching video files if Last-Modified was present. If you have any experience with video over slow server connections, and have succeeded using a specific set of headers, then an answer with the approach you used would be useful.

Upvotes: 1

Views: 929

Answers (1)

user3942918
user3942918

Reputation: 26385

Give this a shot, from http://php.net/manual/en/function.header.php#85146:

$last_modified_time = filemtime($file); 
$etag = md5_file($file); 

header("Last-Modified: ".gmdate("D, d M Y H:i:s", $last_modified_time)." GMT"); 
header("Etag: $etag"); 

if (@strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) == $last_modified_time || 
    trim($_SERVER['HTTP_IF_NONE_MATCH']) == $etag) { 
    header("HTTP/1.1 304 Not Modified"); 
    exit; 
}

Upvotes: 1

Related Questions