1

スクリプトを使用して再生中にタイムマークにアクセスし、その横に画像をロールしてスライドショーを作成することはできますか？

4

2 に答える 2

0

あなたがネイティブのHTML5ビデオプレーヤーを意味していると仮定すると、現在の時刻が読み取られるか、currentTimeプロパティで設定されます-こことWeb上の他のいくつかの参照サイトについて読んでください。

于 2012-11-24T07:31:08.557 に答える
0

これは可能ですが、ブラウザー間の完全な互換性はありません（一部の古いバージョンのIEおよび一部のモバイルブラウザーの場合）。

HTML5タグを使用すると、ページでビデオを再生し、JavaScriptを介してそのタイムマークの場所にアクセスできます。

HTML：

<video id="vidElem" width="640" height="480">
  <source src="movie.webm" type="video/webm" />
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

JS：

var $video = document.getElementById('vidElem');
$video.addEventListener("canplay", _InitSync, false);

function _InitSync() {
  $video.addEventListener("timeupdate", _SyncSlides, false);
}
function _SyncSlides() {
  $curTime = $video.currentTime;
}

正直なところ、私はこのコードを個人的にテストしていませんが、すべて有効であるはずです。最終的には、ビデオの再生時に更新されるビデオの現在のタイムマークを持つ変数があります。また、「_ InitSync（）」関数が必要な手順であるかどうかさえわかりませんが、安全のために多かれ少なかれ追加しました。基本的に、これはビデオ要素の準備ができるのを待ち、準備ができたら、ビデオがタイムマーカーを変更するたびに発生するイベントを追加します。この最後の関数では、$curTimeの値に基づいてスライドを変更するコードを追加するだけです。

これで問題が解決するかどうかをお知らせください。

于 2012-11-24T09:03:19.727 に答える