Q: Video thumbnail on hover play few seconds and then show thumbnail. - Javascript         function playVideo() {
            var thumbImg = document.querySelector('img');
            thumbImg.style.display = 'none';
            var starttime = 7;  // start at 7 seconds
            var endtime = 10;    // stop at 17 seconds

            var video = document.getElementById('yourVideoId');

            video.addEventListener("timeupdate", function() {
               if (this.currentTime >= endtime) {
                    this.pause();
                }
            }, false);

            //suppose that video src has been already set properly
            video.load();
            video.play();    //must call this otherwise can't seek on some browsers, e.g. Firefox 4
            try {
                video.currentTime = starttime;
            } catch (ex) {
                //handle exceptions here
            }
        }
        function showThumbnail() {
            var thumbImg = document.querySelector('img');
            thumbImg.style.display = 'inherit';
        }


<video id="yourVideoId" width="240" height="320" onmouseover="playVideo()" onmouseout="showThumbnail()">
        <source src="assets/video/sample.mp4" type="video/mp4">
    </video>
    <img src="assets/images/banner.png" width="240" height="320">

this the code i have written. when on hover the video plays, but on releasing the hover the video doesn't stop and on hover the video plays and stops at the last frame and doesn't show he thumbnail after ending. 

A: Your code doesn't feature video.pause(); in the showThumbnail() function, which would effectively stop your video. You can furthermore add video.load(); in the aforementioned function to reset it to its initial state.
