Question

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

Html

＆＃13;

repeat

＆＃13;

javascript是

＆＃13;

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

＆＃13;

Answer 1

＆＃13;

$(document).ready(function() {

    var video = document.getElementById("my-video");

    video.addEventListener("canplay", function(){
      video.play();
    });

    video.addEventListener("ended", function(){
      video.currentTime = 0;
    });

});

＆＃13;

Answer 2

您可以使用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;
    });
};
    
       


     

  });

Answer 3

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

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

3 个答案: