0

I have a simple HTML5 video player 

<video width="100%" controls="controls">
    <source src="" type="" />
</video>

and a simple form with textarea on a page. I would like to do a few things in order to make it easier for my clients to provide feedback on my videos:

  • If the user is in the textarea, when they start typing I would like to automatically pause the video and insert the current time code from the video into the textarea and then resume the video when they press enter for a new line. (If possible, this functionality should have an on/off button.)

  • I would also like to have a button above the textarea that would allow them to insert the videos current timecode into the text area (at the end of all current text).

Is this possible?

Many thanks in advance for any help.

user2608266
  • 131
  • 1
  • 1
  • 7

1 Answers1

1

This fiddle should get you headed in the right direction. http://jsfiddle.net/3n1gm4/kLWL4/

JS:

(function() {
    var theText = document.getElementById('text1');
    var theVideo = document.getElementById('video1');
    theText.addEventListener('focus', function(e) {
        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>
tastybytes
  • 1,309
  • 7
  • 17
  • That is very interesting - thank you for taking the time. Any further code that you could provide in order to complete the functionality would be greatly appreciated as I have very little experience of JavaScript. Thank you again. – user2608266 Aug 20 '13 at 06:39