HTML5 video playback is interrupted in IE (or: Missing range request)
I apologize for the question asked ten thousand times on SO before. This situation is different from others. In short, video playback always works on Firefox and Chrome, but in Internet Explorer, all versions always play, all Windows versions.
I have a web page customized according to Microsoft HTML5 suggestions. The modal window provides a video:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<body>
<div class="popupwindow">
<video controls autoplay preload="auto" style="width:100%">
<source src="streamvideo.rails?file=$fileName" type="video/mp4" />
</video>
</div>
</body>
</html>
streamvideo.rails is a CORN Monorail C # feature that acquires a video file from the cloud server as a stream and transmits it as a range request.
First, I'm pretty sure these aren't common problems: the codec is probably ok, the Content-Type response is correct (video / mp4), and IE even picks up the video correctly, at least initially. The network sniffer in the browser shows that it received a small portion of the MP4 file and then stopped.
One oddity I noticed: IE does not create a video request as a range request, while Chrome / FF. Chrome headers:
GET [my URL]?fileName=e65b0b0d-0911-4e3f-bc71-7b5d5a65db57.mp4 HTTP/1.1
Host: localhost
Connection: keep-alive
Accept-Encoding: identity;q=1, *;q=0
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36
Accept: */*
DNT: 1
Accept-Language: en-US,en;q=0.8
Range: bytes=0-6130
IE headers:
GET [same URL] HTTP/1.1
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
Accept: */*
GetContentFeatures.DLNA.ORG: 1
Pragma: getIfoFileURI.dlna.org
Accept-Language: en-US
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
DNT: 1
Host: localhost
My guess is that if I fix this inconsistency, the problem goes away. So: why does IE decide not to query the range? How can I force this? If you think I'm chasing a bogus key, what else can I check?
source to share
It's a little late for an answer. Just thought that if someone searches for this my answer will help them. I found that when IE asks for video content, the "Accept-Ranges: Bytes" header is missing like in Firefox and Chrome, so on the first request, set the response like this (this is an ASP.Net Core example):
response.Headers.Add("Accept-Ranges", "bytes");
response.ContentLength = [length of actual video file];
response.StatusCode = (int)HttpStatusCode.OK;
response.ContentType = [ContentType of requested content];
When the response reappears in the browser, it will evaluate the headers and set up video control as well as the next request with the correct headers. Now, when you check for the Range header, it will be there, and the code for the stream will work as usual.
Hope this helps, it worked for me.
source to share
I have the same problem with Chrome on Android. The range header is missing. For Internet Explorer, I did something like this:
$http_range = (isset($_SERVER["HTTP_RANGE"])) ? $_SERVER["HTTP_RANGE"] : "bytes-0";
Here is in my PHP script that serves video / mp 4 data. All it does is check if the range header is set, if not, it will assume the beginning of the file was requested. Internet Explorer seems smart enough to then capture if the user is looking for another part of the video, i.e. Generates the requested range header.
Works great in IE ... however I tried the above in Chrome and still not happy :( (
source to share
I had the same problem.
MIME was installed correctly. It was video / mp 4.
I checked my apache config. It supports video / mp 4 and audio / mp 4.
The video was encoded in H.264.
I could see the video in chrome and not IE (from 9, 10, 11).
I resized the video from 1920 x 1280 to 720 x 720 and encoded.
And it worked magically.
Now I am looking for why this worked by changing the width and height of the video.
source to share
Developing Jean Roux's answer:
HTML5 video streaming is supported across a range of requests and responses. MDN has a good introduction: https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests
IE10 and IE11 on W7 and W8 DO NOT make range requests (there is no Range header). According to the RFC, the server can respond with 200 responses and all the contents of the file. But this will cause IE to not play the file (I'm not sure why, but based on the network tab in developer tools, the content is truncated, for example, the server sent ~ 10MB, but IE only viewed the first few KB). I had to reconfigure my server so that I can respond with 206, all the contents of the file, and the Accept-Ranges and Content-Range headers.
By the way, you asked about this before the release of W10. Both Edge and IE11 on W10 make range requests.
source to share