JQuery 从第二个零开始播放 html5 视频，但如果用户暂停视频则保留当前帧

Question

我对原生 html5 视频有疑问，我想使用从视频帧中截取的 poster 进行自定义。所以我决定我所有的视频都将排队参数 #t=1 告诉浏览器从第二个 1 开始播放视频。这样我就有可能在我的视频中使用 poster 而不是黑色背景。但是我有一个问题可以简化如下...使用以下 JQuery code 我告诉浏览器从第二个 0 而不是第二个 [=8] 重新初始化视频=]，这是因为我的视频中有 #t=1。所以有了这个 JQuery code 我部分解决了这个问题，因为我有视频 poster，视频虽然设置为在第二个 1 之后开始，但从第二个 [=11] 开始=] 但这里出现了一个问题，用户点击视频，将其暂停但总是从秒 0 开始，但我宁愿万一用户暂停视频，从它所在的点开始被打断了，而不是从一开始。

这是我的伪代码...

$(document).ready(function() {
  var video = $("video")[0];
  // video starting from #t=1 now play from #t=0
  $("video").on("play", function() {
    this.currentTime = 0;
  });
  // pseudo code...
  if pause video then continue from interruption
});

我们将不胜感激每一个建议。谢谢。

$(document).ready(function() {
  var video = $("video")[0];
  $("video").on("play", function() {
    this.currentTime = 0;
   }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="video-html5" style="float: left; margin: 0 5px 5px 0"><video width="560" height="315" controls preload="metadata"><source src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4#t=1" type="video/mp4"></video></div>

Answer 1

$("video").one( would solve your problem as you asked it, but I agree with commenters, you'd probably be better to use directly the poster 属性而不是这个 hack.

$(document).ready(function() {
  $("video").one("play", function() {
    this.currentTime = 0;
   }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="video-html5" style="float: left; margin: 0 5px 5px 0"><video width="560" height="315" controls preload="metadata"><source src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4#t=1" type="video/mp4"></video></div>

JQuery 从第二个零开始播放 html5 视频，但如果用户暂停视频则保留当前帧

JQuery play html5 video starting from second zero but preserving the current frame if the user pause the video

javascript

jquery

html

html5-video

playback