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

Posted 2023-05-07

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

【英文标题】：JQuery play html5 video starting from second zero but preserving the current frame if the user pause the video

【发布时间】：2015-03-06 10:40:17

【问题描述】：

我对原生 html5 视频有疑问，我想使用从视频帧中获取的 poster 进行自定义。所以我决定我的所有视频都将参数#t=1 排队，该参数告诉浏览器从第二个1 开始播放视频。这样我就有可能在我的视频中使用poster 而不是黑色背景。但是我有一个问题可以简化如下...使用以下 JQuery code 我告诉浏览器从第二个0 而不是第二个1 重新初始化视频，这是因为我的视频中有#t=1。所以用这个JQuery code我部分解决了问题，因为我有视频poster，视频虽然设置在第二个1从第二个0开始但这里出现了一个问题，用户点击视频，将其暂停，但总是从第二个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   controls preload="metadata"><source src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4#t=1" type="video/mp4"></video></div>

【问题讨论】：

使用poster属性怎么样？你可以阅读更多here。

poster - Poster frame to show prior to video playback... 我可以将视频帧用作海报并放置poster="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4#t=1"吗？还是不行？

不，你不能。 “poster 内容属性给出了一个图像文件的地址......”。您也可以使用Popcorn.js 插件来解决您的问题。你可以阅读here

谢谢，但 Popcorn 不再维护...

【参考方案1】：

$("video").one( 会按照您的要求解决您的问题，但我同意评论者的观点，您最好直接使用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   controls preload="metadata"><source src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4#t=1" type="video/mp4"></video></div>

【讨论】：

这正是我想要的...但也适用于多个视频标签？例如：<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> 和 <video width="560" height="315" controls preload="metadata"><source src="https://www.w3schools.com/html/mov_bbb.mp4#t=1" type="video/mp4"></video>

poster A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame. 所以我应该使用图像？我想让海报自动显示而无需指定图片网址...

谢谢。我刚刚测试了 2 个视频，效果很好！

标记为已接受您的回答！非常感谢！