HTML5 video loop doesn't work on Chrome (Sitefinity CMS)

2
votes

I ran into this peculiar problem that I couldn't get HTML5 video to loop on my local development environment (ASP.NET + IIS7). The video autoplays just fine. My code looks like this:

<video id="frontpage-video" autoplay loop>
  <source src="http://test-site:8084/video_mp4.mp4" type="video/mp4">
  <source src="http://test-site:8084/video_webm.webm" type="video/webm">
</video>

If I change video source URLs to some publicly available URLs (for example to dropbox), loop works just fine. This is not a major problem since I think (hope) it will work once my site goes live and the video is publicly available.

My question is: Can I make the video loop if my video is not publicly available?

I couldn't find similar problems by googling. Could it be some kind of IIS setting that prevents videos to loop?

Update 1: The problem seems to occur only in Chrome. Firefox and IE works fine.

Update 2: It seems that the video will stop at the end but never returns true for element.ended

> document.getElementById('frontpage-video').duration;
< 16.12

> document.getElementById('frontpage-video').currentTime;
< 16.12

> document.getElementById('frontpage-video').ended;
< false

Update 3: Problem is either in IIS or in Telerik's Sitefinity CMS. Server should send a "206 Partial Content" status but instead it sends 200 OK. Has any Sitefinity users had this problem and know how to solve it?

4
htmliiswebkithtml5-videositefinity
Can you paste what you see when you run this: curl -I -H "Range: bytes=0-200" test-site:8084/video_mp4.mp4 – brianchirls
HTTP/1.1 200 OK Cache-Control: no-cache Pragma: no-cache Content-Length: 1492371 Content-Type: video/mp4 Expires: -1 Server: Microsoft-IIS/8.5 content-disposition: inline; filename=video_mp4.mp4 X-AspNet-Version: 4.0.30319 X-Powered-By: ASP.NET Date: Fri, 25 Jul 2014 12:51:47 GMT – Henri Hietala

4 Answers

2
votes

It looks like your problem is that you're not using HTTP Byte Serving. Your server is sending a "200 OK" response, but it should be sending "206 Partial Content" along with these headers:

Accept-Ranges:bytes
Content-Range:bytes 0-1492370/1492371

The byte range request allows the browser to request only the portions of the file that it needs. So if you seek around, it can skip right to that point.

With the regular 200 response, you will usually at least find that you can't seek in the video. But, depending on how your video file is encoded and where in the file the metadata is placed, you may see more problems. Sometimes the file might not even play at all. WebM is usually more robust than MP4, which can be all over the place.

I don't know IIS well enough to tell you how to configure it, but try starting here: http://blogs.visigo.com/chriscoulson/easy-handling-of-http-range-requests-in-asp-net/

2
votes

Chrome/Opera can't loop the video if the video itself is not served with HTTP 206 Partial Content response but 200 OK instead.

The problem is that Sitefinity's storage providers do not support partial content (version 7.0). They are planning to implement this for the future.

At the moment the possible workaround is to use an external blob storage provider such as Azure, Amazon or ExternalFileSystem (ExternalFileSystemStorageProvider).

I got this information from Sitefinity's support team.

0
votes

May be MIME type in IIS is not set up for MP4. Open IIS, and locate you default page. You'll see MIME type in right pane. Click Add and put field1=.mp4 and field2=video/mp4. Restart IIS. Hope this might work.

0
votes
  • In your question, your video-element doesn't have the id frontpage-video (but i guess it's copy paste?)
  • check if the video end event is called in your webkit browsers, and if so, restart your video.

.

<script type='text/javascript'>
document.getElementById('frontpage-video').addEventListener('ended',myHandler,false);
function myHandler(e) {
    if(!e) { e = window.event; }
    //restart your video
}