Tuesday, June 28, 2016

Problem with Azure Media Player and html5 video preload in Chrome

In one of Sharepoint Online site we are working over Azure Media Player was used for playing the html5 videos on the page. This player works on top of standard html5 <video> tag and has a lot of additional features comparing with basic html5 video player built in to browsers. Performance audit made for pages where it is used showed that browser downloads the whole video mp4 file on page load. Video files took Mbs of data and were the biggest part of overall recourses size being downloaded.

Html5 video tag has special preload attribute using which we can control video preloading behavior:

Value Description
auto

The author thinks that the browser should load the entire video when the page loads

metadata The author thinks that the browser should load only metadata when the page loads
none The author thinks that the browser should NOT load the video when the page loads

However after setting preload to none, Azure Media Player (we used latest version 1.6.1) stopped working in Chrome (in IE and FF it worked): it showed video download progress indicator infinitely and when you clicked on the video thumbnail nothing happened:

So for now we decided to switch to the basic html5 video player which doesn’t have this issue and works in all browsers (also tried http://videojs.com, but didn’t find significant value which it adds comparing with basic html5 player). Although preload attribute itself is not supported in Edge, but this is different story).

2 comments:

  1. Thanks for sharing this informative information...You may also refer....
    How to migrate from a typical HTML4 page to a typical HTML5 page.
    www.s4techno.com/blog/2016/08/30/html5-migration/

    ReplyDelete
  2. Is this issue still occurring? can you check with the most recent version of AMP? (1.7.4)

    ReplyDelete