How to play video on hover/pause when not hovering?

I Using the code below, I have been able to successfully make a function that plays a video on hover.

     <div id="vid">
     <video onmouseover="this.play()" 
        onmouseout="this.pause();this.currentTime=;">
            <source src="PISTOL.mp4"></source>
           </video>    
            </div>

                <script>
            var figure = $(".video");
            var vid = figure.find("video");

            [].forEach.call(figure, function (item,index) {
                item.addEventListener('mouseover', hoverVideo.bind(item,index), false);
                item.addEventListener('mouseout', hideVideo.bind(item,index), false);
            });

            function hoverVideo(index, e) {
                vid[index].play(); 
            }

            function hideVideo(index, e) {
                vid[index].pause(); 
            }
            </script>

however, i want to make it so that instead of the video stopping when you hover-off, it just pauses. And when you hover on again, the video plays where you left off. Any help would be appreciated, thanks!

There’s a typo and unnecessary code:

onmouseout="this.pause();this.currentTime=;">

Should be:

onmouseout="this.pause();">

That should do it.