0

In this past question, someone asked how to pass the currentTime property of an HTML5 video into a textarea. Rather than just displaying the current time, I would like to insert the current time into the textarea when a button is pressed. And be able to do this multiple times.

I create corporate videos, and I want to make a page where people can watch a preview of their video, and insert the current timecode in order to write comments on that part of the video.

Thank you.

Community
  • 1
  • 1
Malcolm
  • 3
  • 1

2 Answers2

0

You can use much of the same code. Just make the event handler it's own function and call it using oncilck from the button:

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>
Carl Friess
  • 1
  • 1
0

This is a working example:

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>
roperzh
  • 890
  • 7
  • 12