使用 'this.currentTime' 获取视频时间并将其重置为 'hover out' 的起点

Question

我有一个视频库，我想在其中动态使用 URL 中的媒体片段时间作为海报。悬停时，我正在尝试将视频重置为初始开始 - 以确保海报处于 2 秒（在此特定示例中）而不是 0。

this.load 有效，但会在再次加载整个视频时造成糟糕的用户体验。

我的想法是将当前时间定义为一个变量（在视频开始播放之前）并在暂停视频时使用它。

但是我只是得到“未捕获的引用错误：未定义 posterTime”。

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

注意我用的是Webflow，跟jQuery/Javascript不是很强。

Answer 1

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

鉴于此要求，您可以从 source 元素的 src 属性中的 URL 检索片段，并将其应用于视频的 currentTime mouseleave 事件发生：

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>

Answer 2

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".

你的想法和代码都很好，但你犯了一个基本错误。记住：在函数内部定义的变量将仅在创建它的那个函数中存在。

对内部变量使用 let（如果可能），对全局变量使用 var。

解决方案：将变量定义为全局（在任何函数之外）...

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

使用 'this.currentTime' 获取视频时间并将其重置为 'hover out' 的起点

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

javascript

video

jquery

html5-video