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

Posted 2023-05-07

【中文标题】视频完成后如何将html5视频设置为初始位置？

【英文标题】：How set html5 video to initial position after video is completed?

【发布时间】：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();
    );
     
    
       


     

  );

【问题讨论】：

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

【参考方案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;
    );
;
    
       


     

  );