0

私は次のようにビデオプログレスバーをレンダリングしています：

<div class="video-timeline">
  {{#isolate}}
    <div style="width: {{progressBarWidth}}" class="video-progress-bar"></div>
  {{/isolate}}
</div>

プログレスバーはタイムライン内に収まり、ビデオの時間が進むにつれて右に伸びます（セッション変数に基づく）。目標は、タイムラインのクリックを観察して、再生場所を変更できるようにすることです。

プログレスバーの右側にあるタイムラインのクリックイベントが正しく表示されます。ただし、ビデオの再生中（およびプログレスバーが継続的にレンダリングされている間）、プログレスバー自体のクリックがタイムラインクリックハンドラーにバブルアップすることはめったにありません。

これらのイベントをどのように観察できますか、またはこれを完全に行うためのより良い方法はありますか？

更新：（datacarlによって提案されているように）オーバーレイを使用することは、1秒間に複数回更新され、meteorによって制御される要素が絶対に必要な場合におそらく最適です。これは私にとってはうまくいきましたが、テンプレートのその特定の部分に対してjQueryベースのソリューションに戻ることになりました。jQueryイベントとmeteorイベントを混在させるのは嫌いですが、jQueryには、プログレスバーを更新するための、応答性が高く、エラーが発生しにくい方法が提供されていました。

4

1 に答える 1

0

これを処理する最も簡単な方法は、div.video-progress-barの上にdiv.progress-bar-overlayを絶対位置に配置し、代わりに.progress-bar-overlayのクリックを観察することだと思います。.video-timelineと同じ高さと幅を指定します。そうすれば、ユーザーが.video-timelineをクリックするか.video-progress-barをクリックするかを処理する必要がありません。

于 2013-03-27T14:34:27.413 に答える