Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 video playback fails in IE (or: Missing range request)

I apologise for asking a question asked ten thousand times on SO before. This situation seems different from the others. In short, video playback via always works on Firefox and Chrome but always fails in Internet Explorer, all versions, all Windows versions.

I have a web page set up according to Microsoft's HTML5 suggestions. A modal window supplies the 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 Castle Monorail C# function that acquires a video file in a cloud server as a Stream and streams it back as a range request.

First off, I'm sure it's not the usual problems: the codec is probably OK, the response's Content-Type is right (video/mp4) and IE is even picking up the video correctly, at least initially. The in-browser network sniffer shows it received a small chunk of an MP4 file and then stopped.

One oddity I noticed: IE is not framing the video request as a range request whilst Chrome/FF are. Chrome's 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's 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

I speculate that if I fix this discrepancy, the problem will go away. So: why is IE deciding not to make a range request? How can I force it to? If you think I'm chasing a bogus clue, what else can I check?

like image 224
spamguy Avatar asked Sep 30 '22 01:09

spamguy


1 Answers

This is a little late for a response. Just thought if somebody searches this, my answer would help them. What I found is that when IE requests the video content the "Accept-Ranges: Bytes" header is not present as with Firefox and Chrome, thus on first request set the response as follows (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 hits the browser again it will evaluate the headers and setup the video control as well as the next request with the correct headers. Now when you validate for the existence of the Range header it will be there and the code to stream will work as normal.

Hope this helps, it worked for me.

like image 139
Jean Roux Avatar answered Oct 11 '22 16:10

Jean Roux