html5 video not showing on ipad using indirect source

Question

I'm implementing an HTML 5 video player in one of my websites. I'm using videoJS for that. On my desktop, the video is showing fine, but on my iPad it does not even load the video. Here is the HTML of the player:

Additionally, here is the JavaScript that adds the source to the video en (re)loads the video:

player1.ready(function () {
    player1.src([
        { type: "video/mp4", src: "Film.aspx?videoId=" + videoID + "&videoType=mp4" },
        { type: "video/ogg", src: "Film.aspx?videoId=" + videoID + "&videoType=ogg" },
        { type: "video/webm", src: "Film.aspx?videoId=" + videoID + "&videoType=webm" }
    ]);
    //player1.poster("Screenshot.aspx?videoId=" + videoID);
    player1.load();
});

In the code above, player1 is the videoJS object of the html video and videoID is correctly set. The source of the video leads to a page that builds an HTTP response. The code for building that respond is as follows:

//--- obtaining video according to settings
string videoPath = this.getPathOfVideo(videoId);
FileStream video = new FileStream(videoPath, FileMode.Open);
var videoFile = new FileInfo(videoPath);

//--- building the actual response
Response.StatusCode = 206;
Response.Clear();
Response.AddHeader("Content-Length", video.Length.ToString());
Response.AddHeader("Content-type", "video/" + videoType);
Response.AddHeader("Accept-Ranges", "bytes");
if (Request.Headers["Range"] != null && !Request.Headers["Range"].EndsWith("-"))
{
    Response.AddHeader("Content-Range", "bytes " + Request.Headers["Range"].Substring(6) + "/" + videoFile.Length);
}
else
{
    Response.AddHeader("Content-Range", "bytes " + 0 + "-" + (videoFile.Length - 1 + "/" + videoFile.Length));
}
video.Close();
Response.TransmitFile(videoPath);
Response.End();

In the code above, GetVideoPath returns the right path to the video.

things I already tested/fixed

I added the mime types to the web.config of my server
When entering the direct path to the video on my iPad, the video plays fine, so no codec problems are present in the file I believe.
controls are present in the player.
loop attribute is not used, as far as I know.
my server supports byte range, for I receive responses with status code 206 (when I'm using chrome).

info that might also be useful

when I connect my iPad to a mac and look at the response that should contain the video file, I see that there are no request headers, nor response headers. When using chrome, they are both present.
these are the headers of the source request as received in Chrome:

request headers

Accept:/

Accept-Encoding:identity;q=1, *;q=0

Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4

Cache-Control:no-cache

Connection:keep-alive

Host: [correct host]

Pragma:no-cache

Range:bytes=0-

Referer: [correct address]

User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36

Query String Parameters

videoId:32

videoType:mp4

Response Headers

Accept-Ranges:bytes

Cache-Control:private

Content-Length:1932210

Content-Range:bytes 0-1932209/1932210

Content-Type:video/mp4

Date:Tue, 19 Aug 2014 13:47:38 GMT

Server:Microsoft-IIS/7.5

X-AspNet-Version:4.0.30319

X-Powered-By:ASP.NET

X-Powered-By-Plesk:PleskWin

gnou · Accepted Answer

You simply cannot autoplay a video or any other stream on iOs or Android devices. This is a security restriction you must deal with:

A media stream (audio or video) can only be started after a touch event.
If you need to open another stream, you'll have to trigger another touch event right before loading/playing it.
Finally, you will only be able to load/play one stream at a time.

Simply add a play button above your video to trigger video.play().

html5 video not showing on ipad using indirect source

Answers (1)

Related Questions