Video Loading

Buffer

by anil001ry

HTML

<video id="video" autoplay controls>
    <source src="https://isl-ar-project.s3.ap-south-1.amazonaws.com/res/ar_assets/videos/bg_video/eby2.mp4" type="video/mp4" />
</video>
<div id="placeholder" src="your_waiting_image" class="placeholder">here goes your picture</div>

CSS

.placeholder{
    display: none;
    position: absolute;
    background: url("your_waiting_image") no-repeat;
    background-size: cover;
    border: black solid 1px;
}

JavaScript

var video = document.getElementById("video");
var placeholder = document.getElementById("placeholder");
placeholder.style.top = video.offsetTop+"px";
placeholder.style.left = video.offsetLeft+"px";

video.onwaiting = function(){
    showPlaceholder(placeholder, this);
};
video.onplaying = function(){
    hidePlaceholder(placeholder, this);
};

testIt();
vid.play();



function showPlaceholder(img, vid){
    img.style.height = vid.scrollHeight + "px";
    img.style.width = vid.scrollWidth + "px";
    img.style.display = "block";
    vid.style.display = "none";
}

function hidePlaceholder(img, vid){
    img.style.display = "none";
    vid.style.display = "block";
}


function testIt(){
    setTimeout(function(){
        video.onwaiting.apply(video);
        video.pause();
        setTimeout(function(){
            video.onplaying.apply(video);
            video.play();
        }, 3000);
    }, 1000);
}