0

シンプルな HTML5 ビデオ プレーヤーがあります

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

ページ上にテキストエリアがある単純なフォーム。クライアントが私のビデオについてフィードバックを提供しやすくするために、いくつかのことをしたいと思います。

  • ユーザーがテキストエリアにいる場合、入力を開始すると、ビデオを自動的に一時停止し、ビデオの現在のタイムコードをテキストエリアに挿入し、Enter キーを押して新しい行を入力するとビデオを再開します。(可能であれば、この機能にはオン/オフ ボタンが必要です。)

  • また、テキスト領域の上に、ビデオの現在のタイムコードをテキスト領域 (現在のすべてのテキストの最後) に挿入できるボタンを配置したいと考えています。

これは可能ですか？

助けてくれてありがとう。

4

1 に答える 1

1

このフィドルは、正しい方向に向かうはずです。 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>
于 2013-08-15T21:46:06.257 に答える