JSFiddle - React, Tailwind, and code Playground

HTML

<video id="myvideo" controls="" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
    <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
        <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
            <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
                <p>Your user agent does not support the HTML5 Video element.</p>
</video>
<img id="myposter" src="http://media.w3.org/2010/05/sintel/poster.png">
<button id="myplaybutton">play</button>

CSS

#myposter, #myvideo {
    position:absolute;
    top:0;
    left:0;
}
#myplaybutton {
    position:absolute;
    left:50%;
    top:500px;
}
#myposter {
    -webkit-transition: visibility 0.2s linear, opacity 0.2s linear;
    -moz-transition: visibility 0.2s linear, opacity 0.2s linear;
    -o-transition: visibility 0.2s linear, opacity 0.2s linear;
    transition: visibility 0.2s linear, opacity 0.2s linear;
}

JavaScript

var playedBefore = false,
    myvideo = document.getElementById('myvideo');
myvideo.load();// Load the video ahead of time.
myvideo.addEventListener('playing',

function () {
    if (!playedBefore) {
        setTimeout(function () {
            var myposter = document.getElementById('myposter');
            myposter.style.visibility = 'hidden';
            myposter.style.opacity = '0';
        }, 2000); // Just a little extra time.
    }
    playedBefore = true;
});
document.getElementById('myplaybutton').onclick = function () {
    myvideo.currentTime = 7;// Put the video at the right time for the poster.
    myvideo.play();
};