在 HTML 5 Video 和表单 textarea 之间传递信息 [英] Passing information between HTML 5 Video and form textarea

问题描述

我有一个简单的 HTML5 视频播放器

I have a simple HTML5 video player

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

和一个在页面上带有 textarea 的简单表单.为了让我的客户更轻松地对我的视频提供反馈，我想做一些事情:

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:

• 如果用户在 textarea 中，当他们开始输入时，我想自动暂停视频并将视频中的当前时间码插入 textarea，然后在他们按 Enter 时恢复视频以获取新的线.(如果可能，此功能应该有一个开/关按钮.)

• 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).

这可能吗?

非常感谢您的帮助.

推荐答案

这个小提琴应该让你朝着正确的方向前进.http://jsfiddle.net/3n1gm4/kLWL4/

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>

这篇关于在 HTML 5 Video 和表单 textarea 之间传递信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！