Error playing videos htmlVideoLoader

[Kataleena]

Hi,

I just updated to v15.048.1 and republished my project, I'm now getting this random error message in the middle of playing videos using the htmlVideoLoader, its happening about 1 in every 10 times of playing the videos and not always the same video.

My mp4's are hosted on Rackspace, I have not changed any settings around videos in my project.

I have attached an image of the error on the screen and this is error showing in the Chrome console:
Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH

I have only been testing with Chrome.

Any ideas?

[Clifton]

Kataleena,

This has become a common problem when playing videos in Chrome (mostly, but not exclusively).
There are two basic issues that can lead to this:

1. One or more video files may actually be corrupt. I've recently had to re-convert a whole bunch of videos from a project due to the same problem. Interestingly, while I've often used Handbrake to convert videos, Handbrake was creating videos that had issues. Probably in the saving of meta data for fast streaming. I switched to XMediaRecode and the resulting files play much more predictably.
   
   You can test this in your project by just converting a few videos and see if that cleans things up.
2. The second, and likely very important, is to make sure your server is set up to stream video content and that it is not compressing content before delivery. The ERR_CONTENT_LENGTH_MISMATCH indicates that the browser is detecting a content stream that doesn't match what is being received.
   
   Check out this forum: Questions about ERR_CONTENT_LENGTH_MISMATCH
   Also make sure your server is set up to accept-ranges. This is very necessary for streaming mp4 video and other files as well. This can be set up in an .htaccess file on the server. Here is the relevant setting in my .htaccess file:
   

   <FilesMatch "\*.(mp4|ogv|wav|mp3|ogg|mov|webm|svg)$">
       FileETag None
       Header unset ETag
   
       # ADDED BYTE RANGES FOR CHROME BROWSERS TO SEEK ON MP4 FILES
       # SEE stackoverflow.com/questions/20894640/how-to-disable-the-range-option-in-http-request-header
       Header set Accept-Ranges bytes
      
       Header set Pragma "no-cache"
       Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
       Header set Expires "Mon, 10 Apr 1972 00:00:00 GMT"
   </FilesMatch>

   
   Just because you may not have made any recent changes to your server does not mean that the Webhost hasn't made changes or upgrades that are causing troubles.
   
3. It should be noted that clearing your Chrome data cache may help after republishing as the browser may be fetching a mixture of old and new content. There have not been any recent changes in the PowerPac's HTML video player. In addition, the player just leverages the internal playback mechanism of the browser and provides a way to access that mechanism with additional features.

Please post back your findings and solutions as these may be relevant for others.

[Kataleena]

Hi Clifton,

Thanks for the suggestions. The issue has been intermittent with not much to go on.

1. This doesn't seem to be our issue
2. We are using Rackspace, so much of this is out of our control. But the stream does appear to be working with ranges as expected
3. Worth trying, but never really a viable solution in a commercial environment

Gut feeling is potentially an issue within Rackspaces CDN network with a server somewhere that isn't serving the content as expected.

We have since migrated all our content to Google Storage within Google Cloud Platform and have not seen the issue since, GCP has also given us the opportunity to tune the HTTP headers that are returned with the videos surrounding caching as well.

[Clifton]

I use CloudFlare and I do know that if you turn on too many optional optimization features that suddenly the content doesn't play right. CDN's do a lot of content compression during delivery and this can become messy. Some are not friendly with videos because they are not a true streaming environment like YouTube, etc. At least unless you spend a lot of money on their services. Over the last year or so, CloudFlare has played really good with videos, whereas previously it would not accept ranges and some browsers would not allow users to skip to a specific place in the video. They always had to play from the beginning. To get around this, I put all my videos on my native WebHost's server and set the .htaccess to accept-ranges and all worked perfect.

Thank you for sharing your comments!