HTML視頻應在第一幀停止

Question

我的html頁面中有一個.mp4視頻。 我將自動播放應用於該視頻，它在結束幀處停止。 我在這里擔心的是，一旦視頻播放完畢，該視頻應在第一幀返回。 有人可以建議我該怎么做嗎？ 謝謝

Answer 1

如果您只想讓視頻循環播放並重新開始播放，則可以使用'loop'屬性：

<video controls loop>
  <source src="yourVideo.mp4" type="video/mp4">
  ...
</video>

如果您想檢測視頻結尾並執行其他操作，例如重新啟動視頻，則可以在JavaScript中使用視頻結尾事件：

$("#yourVideo").on("ended", function() {
   //Add whatever you want to do when the video ends here
   video.pause();
   video.currentTime = 0;
   video.play();  //You may not need this - experiment on different browsers
   video.pause();
});

Answer 2

必須包含我正在使用CDN js文件

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script type='text/javascript'>
     $(document).ready(function () {
     document.getElementById('Sample').addEventListener('ended',myHandler,false);  
          function myHandler(e) {
               var video =document.getElementById('Sample');
               video.currentTime = 0;
               video.pause();
          }
     });
</script>

的HTML

<video src="video.mp4" id="Sample" autoplay>
      video not supported
</video>

Answer 3

通過JavaScript並假設您知道視頻的幀速率：

function goFirstFrame () {
    var video = document.getElementById('videoId');
    var frameTime = 1/25; // If your video is 25fps
    video.currentTime = 0 + frameTime;
    video.pause();
 }