JavaScript

Videos with MediaElementjs

Button overlay on top of Video [iPad]:

  • if the default controls of video tag is set to true, there’s no way to override the click events
  • libraries like MediaElement disabled the default controls, thereby recapturing events

How to destroy video tag completely:

  • simply changing the source attribute of <video> or <source> is not enough.
  • <video> tag needs to be taken out of the stream of document completely.

How to count video into deferred objects for the loading:

  • there are two events for loading (on MediaElementjs):
    1. loadeddata: The first frame of the media has finished loading.
    2. loadedmetadata:┬áThe media’s metadata has finished loading; all attributes now contain as much useful information as they’re going to.
  • after firing load() for video, wait to capture “loadeddata” event
$('video').mediaelementplayer({
    success: function(player, node) {
        // load video and events
        player.load();
        var videoLoad = $.Deferred();

        // add the object into a list of all the objects
        self.loading.add(videoLoad);

        player.addEventListener("loadeddata", function() {
            videoLoad.resolve();
        });
    };
});
Standard