Question

在this past question中，有人询问如何将HTML5视频的currentTime属性传递到textarea。我不想只显示当前时间，而是在按下按钮时将当前时间插入到textarea中。并且能够多次这样做。

我制作公司视频，我想制作一个人们可以观看视频预览的页面，并插入当前时间码，以便在视频的该部分上发表评论。

谢谢。

Answer 1

您可以使用大部分相同的代码。只需将事件处理程序设置为自己的函数，然后使用按钮中的oncilck调用它：

function showTime() {
    var theText = document.getElementById('text1');
    var theVideo = document.getElementById('video1');
    curTime = theVideo.currentTime;
    curSecs = Math.floor((curTime % 60));

    curTimeText = "\n" + Math.floor( curTime / 60 ) + ":" + ((curSecs < 10)?'0'+curSecs:curSecs);

    theText.value = theText.value + curTimeText;
});

HTML：

<video width="100%" controls id="video1">
    <source type="video/mp4" src="">
</video>
<textarea id="text1" cols="20" rows="10"></textarea>
<button onclick="showTime()">Show current time</button>

Answer 2

这是一个有效的例子：

var timeGetter = document.getElementById("timeGetter"),
    video = document.getElementById("video"),
    comment = document.getElementById("comment");

document.getElementById("timeGetter").addEventListener("click", function(e) {
  e.preventDefault();

  comment.value = comment.value + "\n"+ video.currentTime;  
});

<video src="https://vimeo-hp-videos.global.ssl.fastly.net/5/5-vp9.webm" id="video" autoplay width="200"></video>

<a href="#" id="timeGetter">Get current time!</a>
  
<textarea id="comment" rows="20"></textarea>

按钮

2 个答案: