Using 'this.currentTime' to get the time of a video and reset it to the starting point on 'hover out'

user_17730789 0
Viewed 351

I have a video library where I want to dynamically use the Media Fragment time in URL as the poster. When hovering out, I am trying to reset the video to the initial start - to make sure the poster is at 2 seconds (in this specific example) instead of 0.

this.load works but creates a bad user experience as the whole video loads in again.

My idea is to define the current time as a variable (before the video starts playing) and use it when pausing the video.

However I just get "Uncaught ReferenceError: posterTime is not defined".

<video id="video">
  <source src="videourl.mp4#t=2" type="video/mp4">
</video>

const videos = document.querySelectorAll("video")

  videos.forEach(video => {

    video.addEventListener("mouseover", function () {
        var posterTime = this.currentTime;
        this.currentTime = 0;
        this.play()
    })
    
    video.addEventListener("mouseout", function () {
      this.currentTime = posterTime;
      this.pause();
    })
  })

Note that I use Webflow and is not very strong with jQuery/Javascript.

html5-video video jquery javascript
2 Answers

As I hover out I need it to show that initial frame again (not the first frame, but the one set in the URL)

Given this requirement you can retrieve the fragment from the URL in the src attribute of the source element and apply it to the currentTime of the video when the mouseleave event occurs:

const videos = document.querySelectorAll("video")

videos.forEach(video => {
  video.addEventListener("mouseenter", function() {
    this.currentTime = 0;
    this.play()
  })

  video.addEventListener("mouseleave", function() {
    let src = this.querySelector('source').src;
    let time = (src.split('#')[1] || 't=0').split('=')[1];
    this.currentTime = time;
    this.pause();
  })
})
<video id="video">
  <source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4#t=5" type="video/mp4">
</video>

user_5194130

My idea is to define the current time as a variable (before the video starts playing) and use it when pausing the video. However I just get "Uncaught ReferenceError: posterTime is not defined".

Your idea and code is fine but you made a basic mistake. Remember: A variable defined inside a function will exist only for that function where it was created.

Use let for internal variables (where possible) and use var for global variables.

solution: Define the variable as global (outside of any functions)...

const videos = document.querySelectorAll("video");
var posterTime = -1; //# global var, with starting value...
 
videos.forEach(video => {

    video.addEventListener("mouseover", function () 
    {
        posterTime = this.currentTime; //# set time
        this.currentTime = 0;
        this.play()
    })

    video.addEventListener("mouseout", function () 
    {
        this.currentTime = posterTime; //# get time
        this.pause();
    })
})
user_20577090
Related