HTML5 Video Shows a black screen when loading

Question

HTML5 Video Shows a black screen when loading

I tried to upload a video using HTML5 and angularJS. But the video first shows a black screen, and then starts playback. This only happens in the Android Chrome browser.

I tried the poster image and checked the readyState video (called the playback function only after getting the readyState 4 value). But the original problem with the black screen has not been fixed.

Here is my HTML:

<div class="load-image"></div>
<div class="video-poster" style="display: none;">
    <video id="video_intro" height="413" width="595" src="assets/video/video.mp4" poster="assets/images/mobile/image.png"></video>
</div>

And my Javascript code:

myVideo.load();
$('.fireneuron-button, .animate-button').click(function () {
    var myVar = setInterval(function () {
        var ready = myVideo.readyState;
        if (ready == 4) {
            myVideo.play();
            clearInterval(myVar);
        }
    }, 1000);
});