addEventListener重置视频后如何播放HTML5视频？

Question

如何使用自定义功能“resetVideo”重置此视频后再次播放？

所有内容都会重置为视频的开头并显示海报图片，但是当我点击播放按钮时，没有播放任何内容。

      <video id="hero-video" width="100%" preload="auto" style="visibility: visible; width: 100%;" poster="http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png">
                <source src="http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv" type="video/ogg codecs='theora, vorbis'">               
                <source src="http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm codecs='vp8, vorbis'">
                <source src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4 codecs='avc1.42E01E, mp4a.40.2'">               
            </video>
<div id="buttonbar">
            <button id="restart" onclick="restart();">[]</button> 
            <button id="play" onclick="vidplay()">&gt;</button>
        </div>  
 <div class="banner-box">
                                    <h1>Headline</h1>
                                    <p>copy</p>
                                    <a href="#" class="btn btn-view">link</a>
                                </div>

<script type="text/javascript">
        var video = document.getElementById("hero-video");
        var button = document.getElementById("play");
        var bannerContent = document.getElementById("video-ad-banner");
        setTimeout(function(){ $(bannerContent).fadeOut(); video.play();}, 5000);
        video.addEventListener("ended", resetVideo, false);
         function vidplay() { 
       if (video.paused) {
          video.play();
          button.textContent = "||";
           $(bannerContent).fadeOut();        
       } else {
          video.pause();
          button.textContent = ">";
          $(bannerContent).fadeIn();
       }
    }
    function resetVideo() {
        this.src = this.src;
        video.currentTime = 0;
        $(bannerContent).fadeIn();
    }
    function restart() {
        video.currentTime = 0;
    }



</script>