页面视频播放完不显示最后一帧而回到播放前原始的样式

  <div class="breaking">
            <video id="myvideo">
                <source src="xiangguandeshipin.mp4" type="video/mp4">
            </video>
            <img class="poster" id="imgposter" src="inages/videoposter.jpg" alt="">  
 </div>

var video = document.getElementsByTagName('video')[0];
var btn = document.getElementById('imgposter');       
 window.onload=function(){
        console.log(video.paused);
        //判断视频是否停止
        // if(video.paused){            
        //     video.removeAttribute("controls")
        //     btn.style.display='block';
        // } else{            
        //     video.pause();            
        //     btn.style.display='none';            
        // }
        btn.onclick = function(){ 
            video.play();
            this.style.display='none';            
            video.setAttribute("controls", "controls");
         }  

    }
   //实现视频播放完回到最初的样式
        video.addEventListener('ended',function(){
          this.src="xiangguandeshipin.mp4";
          btn.style.display='block';
    })