视频完成后如何将html5视频设置为初始位置？答案

【问题标题】：How set html5 video to initial position after video is completed?视频完成后如何将html5视频设置为初始位置？
【发布时间】：2018-01-14 13:53:58
【问题描述】：

我使用 html5 video 标签来播放视频。播放完整视频后，我想将视频当前时间设置为零。如果我使用循环视频将到达初始位置并自动播放。我想将视频带到初始位置，但不需要自动播放。如何做到这一点？

HTML 是

<div class="video-wrapper" id="my-video" >
    <video src="<?php echo asset_url().'videos/Video.mp4';?>" controlsList="nodownload" id="my-video"></video>
</div>

javascript 是

$(document).ready(function() {
    /**
     * Video element
     * @type {HTMLElement}
    */
    var video = document.getElementById("my-video");

    /**
     * Check if video can play, and play it
    */
    video.addEventListener("canplay", function(){
        
      video.play();
    });
     
    
       


     

  });

【问题讨论】：

答案在这里stackoverflow.com/questions/10461669/…

标签： javascript html video

【解决方案1】：

$(document).ready(function() {

    var video = document.getElementById("my-video");

    video.addEventListener("canplay", function(){
      video.play();
    });

    video.addEventListener("ended", function(){
      video.currentTime = 0;
    });

});

【讨论】：

【解决方案2】：

您可以将侦听器附加到“结束”事件（此处参考：https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events）并在处理程序中将视频的 currentTime 设置为 0。

【讨论】：

【解决方案3】：

您可以使用 onEnded 事件检查视频何时结束，并使用 currentTime 属性将当前时间设置回零。

OnEnded 事件：onended event

$(document).ready(function() {
    /**
     * Video element
     * @type {HTMLElement}
    */
    var video = document.getElementById("my-video");

    /**
     * Check if video can play, and play it
    */
    video.addEventListener("canplay", function(){   
      video.play();
    });


     video.addEventListener("ended", function(){
      video.currentTime = 0;
    });
};
    
       


     

  });

【讨论】：