0

I have a problem with native html5 videos that I would like to customize with a poster taken from a video frame. So I decided that all my videos will have queued the parameter #t=1 that tells the browser to start the video from the second 1 onwards. In this way I have the possibility to have a poster in my video instead of a black background. But I have a problem that simplifies as follows... with the following JQuery code I tell the browser to re-initialize the video from the second 0 instead of the second 1, this because I have in my videos #t=1. So with this JQuery code I partly solved the problem, because I have the video poster, the video although set to start after the second 1 starts from second 0 but here arises a problem, the user clicks on the video, puts it on pause but always starts from second 0, but I would rather that in case the user pauses the video, this starts from the point where it was interrupted and not from the beginning.

Here is my pseudo code...

$(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
});

Every suggestion is appreciated. Thank you.

$(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>
Alessandro
  • 900
  • 12
  • 23
  • 1
    What about using `poster` attribute? You can read more [here](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-video-element). – N'Bayramberdiyev Apr 03 '19 at 12:00
  • `poster - Poster frame to show prior to video playback`... can I use the video frame as poster putting `poster="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4#t=1"`? or not? – Alessandro Apr 03 '19 at 12:03
  • 1
    No, you can't. "The `poster` content attribute gives the address of an image file that...". You also can use a [Popcorn.js](https://github.com/mozilla/popcorn-js/) plugin to solve your problem. You can read [here](https://stackoverflow.com/questions/7323053/dynamically-using-the-first-frame-as-poster-in-html5-video) – N'Bayramberdiyev Apr 03 '19 at 12:21
  • Thanks, but Popcorn is no longer maintained... – Alessandro Apr 03 '19 at 12:35

1 Answers1

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 attribute rather than this 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>
Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • that's exactly what I was looking for... but works also for several video tags? example: `` and `` – Alessandro Apr 03 '19 at 12:25
  • `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.` so I should use an image? I'd like to have the poster automatically showed without having to specify an image url... – Alessandro Apr 03 '19 at 12:32
  • thanks. I just tested with 2 videos and works great! – Alessandro Apr 03 '19 at 12:45
  • Marked as accepted answer to your answer! Thanks a lot! – Alessandro Apr 03 '19 at 12:54