Question

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

   <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跳转到时间戳视频按钮

2 个答案: