Load Html5Video 100% then show Page

Question

I need to load a Html5 Video 100% then i need to "play" it and show my page with the video.

I need to do this because my video is a little big and its start without load 100% and freeze

Answer 1

You have to use Media Source Extensions (MSE) to control this. Otherwise the browser will do what it thinks is best and you will not be able to force or guarantee that the browser will load 100% of your video.

Check out MSE here (intro), and here (specs) and here (use-case).

Answer 2

Create the element in JS:

var obj = document.createElement('video');
$(obj).attr('id', 'example_video_test');
$(obj).attr('width', '640');
$(obj).attr('data-height', '264');
$(obj).attr('controls', ' ');
$(obj).attr('poster', '../oceans-clip.jpg');


source = document.createElement('source');
$(source).attr('type', 'video/mp4');
$(source).attr('src', '../oceans-clip.mp4');
$(obj).append(source);


if ( document.getElementById('example_video_test').readyState === 4 ) {
    // it's loaded
}

P.S : This code is not tested and may need few changes

readyState == 4 ==> Enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption.