JSFiddle - React, Tailwind, and code Playground
HTML
<video id="bg" preload="auto" autoplay style="outline: 1px solid red;" muted controls>
<source type="video/mp4" src="http://www.auby.no/files/video_tests/h264_720p_mp_3.1_3mbps_aac_shrinkage.mp4" />
</video>
JavaScript
$(document).ready(function () {
var v = $("#bg").get(0);
var loading = true;
$("#bg").on("playing", function () {
alert("wat");
if(loading) {
v.pause();
}
});
$("#bg").on("progress", function () {
//console.log("preloading");
var percent = (v.buffered.end(0)/v.duration) * 100;
if(percent >= 80) {
loading = false;
}
});
});