Untitled

video player: show / hide arrow
var video = $("#myvideo").get(0);
$(".video-arrow").click(function(){
    if (video.paused) {
        video.play();
        $(this).hide();
    }
    else{
        video.pause();
        $(this).show();
    }
});

<div class="video">
        <video id="myvideo" title="My amazing video" poster="images/banner-r-img.png"  preload="auto" controls>
            <source src="videos/intro.mp4" type="video/mp4" />
            <source src="videos/intro.ogv" type="video/ogg" />
            <source src="videos/intro.webm" type="video/webm" />
             Video tag not supported. Download the video <a href="movie.webm">here</a>.
    </video>
</div>

.video-arrow{
    width:121px;
    height:120px;
    background: url(../images/video-arrow.png) no-repeat;
    position:absolute;
    left:655px;
    top:122px;
    z-index:100;
    cursor:pointer;
}