javascript 跳转到时间戳视频按钮

Question

我想创建一个可以跳转到特定时间戳的按钮或 link。到目前为止，我成功使用了我得到的按钮：

   <video id="video" src="./movie.m4v" controls></video>    
   <div><button onclick="setCurTime()" type="button" >Go to 5 Sec</button></div>

</p>

<script>

var vid = document.getElementById("video");


function setCurTime() { 
    vid.currentTime=5;
} 
</script>

问题是，如果我想创建假设 5 个时间戳，我必须创建 5 个按钮（没关系）加上 5 个函数，每个函数都跳转到给定的时间戳（这很糟糕）。有没有办法在 vid.currentTime= 之后放置一个变量值来读取按钮中设置的值？所以它会像

    <video id="video" src="./movie.m4v" controls></video>    
   <div><button onclick="setCurTime()" type="button" value="5">Go to 5 Sec</button></div>
   <div><button onclick="setCurTime()" type="button" value="10">Go to 10 Sec</button></div>
   <div><button onclick="setCurTime()" type="button" value="20">Go to 20 Sec</button></div>

</p>

<script>

var vid = document.getElementById("video");


function setCurTime() { 
    vid.currentTime= *valuesetinbutton*;
} 
</script>

Answer 1

只需使用随点击事件传入的 this。

function setCurTime() { 
    vid.currentTime = this.value;
}

this指的是本例中触发事件的元素

Answer 2

您应该可以将变量带入 setCurTime()

喜欢

function SetCurTime(timeValue)
{
  vid.currentTime = timeValue;
}

然后使用

<div><button onclick="setCurTime(5)" type="button" value="5">Go to 5 Sec</button></div>
   <div><button onclick="setCurTime(10)" type="button" value="10">Go to 10 Sec</button></div>
   <div><button onclick="setCurTime(20)" type="button" value="20">Go to 20 Sec</button></div>

或者你可以这样使用它

function SetCurTime()
{
  vid.currentTime = this.value;
}

javascript 跳转到时间戳视频按钮

javascript jump to timestamp video button

javascript

video

timestamp