HTML5Video - Fix invalid getDuration method response

[joaopaulovieira]

Summary

TL;DR: Fixes clappr/clappr#1910.

Currently, the HTML5Video playback calls the _ready method even if the HTMLMediaElement is not ready yet. This PR moves the _ready call to inside the _onLoadedMetadata method, which will be called after the HTMLMediaElement loadedmetadata event occurs.

With this change, the ready event is only called after the HTMLMediaElement metadata is available.

Changes

• html5_video.js:
  • Removes the _ready call inside render method;
  • Adds the _ready call inside _onLoadedMetadata method;
  • Simplify if statements inside render method;
  • Moves template for the to of class declaration;
• html5_video.test.js:
  • Creates tests for new code added on _onLoadedMetadata method;

How to test

• Try to get media duration immediately after the ready state has updated on any Clappr scope.
  • E.g.: Set the option events: { onReady: function() { alert(`player.getDuration returns: ${this.getDuration()}`) } } on Clappr initial setup.
  • The alert should be rendered with the correct media duration value.

A picture/video tells a thousand words

iMac with Firefox:

Before this PR:


After this PR:

iOS with Safari:

Before this PR:


After this PR: