In my opinion, it's quite common for the poster image to fade out before a video starts playing. One way to address this issue is by placing an image in front of the video. Once you instruct the video to begin playing, wait for the 'playing' event to be triggered on the video element. Subsequently, hide or quickly fade out the image.
You could implement a solution like this:
var playedBefore=false,myvideo=document.getElementById('myvideo')
myvideo.addEventListener('playing',
function(){
if(!playedBefore){
setTimeout(function(){
document.getElementById('myposter').style.display='none';
},100);// Just a little extra time.
}
playedBefore=true;
});
myvideo.play();
You can experiment with different events and function calls at http://www.w3.org/2010/05/video/mediaevents.html.
Another suggestion is to invoke the load() method on the video some time before initiating playback, ensuring that the video is prepared to play when play() is called.
For a demonstration incorporating all these elements, along with a fade effect on the poster, check out this JSFiddle: http://jsfiddle.net/jdwire/CM4dg/