teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問[Chart.js][JavaScript] グラフ部分をクリックして対応の再生位置に遷移させたい、再生バー動かしたらカーソルも移動させたい

編集履歴

質問編集履歴

5

再生位置取得・mousemoveイベント取得 説明文変更

2021/09/28 03:28

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,9 @@
36
36
 
37
37
 
38
38
 
39
- デバッグ用にvideoオブジェクトのcurrentTimeをconsole.logで表示させようとしていますが取れませんでした、これはコードのロジックが問題あるのでしょうか。
39
+ 今のところ現在の再生位置取得と、コントロールバー上でのmousemoveイベント取得までできました。
40
+
41
+ 取得したこれらの情報をカーソル側に伝えてカーソルを動かす方法を考えているところです。
40
42
 
41
43
 
42
44
 

4

コントロールバー上のmousemoveを検出

2021/09/28 03:28

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -346,14 +346,16 @@
346
346
 
347
347
  //ビデオの再生箇所を検出してカーソルを移動したい(途中)
348
348
 
349
+ video_.addEventListener('mousemove', (e) => {
350
+
349
- var baseSec = Math.floor(v.currentTime);
351
+ console.log('mousemove');
352
+
353
+ });
354
+
355
+ //棒グラフの部分をクリックすると、カーソルと再生位置をさせたい
350
356
 
351
357
 
352
358
 
353
- //棒グラフの部分をクリックすると、カーソルと再生位置をさせたい
354
-
355
-
356
-
357
359
  }
358
360
 
359
361
  }

3

currentTime取得

2021/09/28 03:25

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -332,13 +332,15 @@
332
332
 
333
333
  //デバッグ：currentTime表示
334
334
 
335
- var video = document.querySelector('video');
335
+ var video_ = document.querySelector('video');
336
-
336
+
337
- video.addEventListener("timeupdate", function(e) {
337
+ video_.addEventListener("timeupdate", (e) => {
338
+
338
-
339
+ var currentTime_ = video_.currentTime;
340
+
339
- console.log(video.currentTime);
341
+ console.log(currentTime_);
340
-
342
+
341
- });
343
+ });
342
344
 
343
345
 
344
346
 

2

getElementById -> querySelector

2021/09/28 03:12

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -332,7 +332,7 @@
332
332
 
333
333
  //デバッグ：currentTime表示
334
334
 
335
- var video = document.getElementById('video');
335
+ var video = document.querySelector('video');
336
336
 
337
337
  video.addEventListener("timeupdate", function(e) {
338
338
 

1

②ビデオコントロールバーに関する質問・画像を追加

2021/09/28 03:09

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -22,6 +22,8 @@
22
22
 
23
23
  サンプルは映像が30秒で、棒グラフの項目数も30個なのでちょうど１項目＝１秒で対応していますが、将来この関係が変化した際でも対応できるようにしたいです。
24
24
 
25
+
26
+
25
27
  今のところは
26
28
 
27
29
  (1) 動画の再生位置を取得
@@ -32,7 +34,13 @@
32
34
 
33
35
  と実装時の予想を立てています。
34
36
 
37
+
38
+
39
+ デバッグ用にvideoオブジェクトのcurrentTimeをconsole.logで表示させようとしていますが取れませんでした、これはコードのロジックが問題あるのでしょうか。
40
+
41
+
42
+
35
- コメント「再生箇所をDiv:textに表示したい」は途中まで処理を書いてみましたが、それ以降が思いつかなかったので、今後の参考としてどのように処理を書いて行ったらいいのか教えていただけると、またもしより良い案がありましたら共有いただけると幸いです。
43
+ またプレーヤー再生位置とカーソルの連動ロジックについてはまだ考え中なのですが、もし良い案がありましたら共有いただけると幸いです。
36
44
 
37
45
  ![イメージ説明](4d208176f085fc26d22ebad948e4bba1.png)
38
46
 
@@ -322,21 +330,19 @@
322
330
 
323
331
 
324
332
 
325
- //再生箇所をDiv:textに表示したい
333
+ //デバッグ：currentTime表示
326
-
334
+
327
- var v = document.getElementById('video');
335
+ var video = document.getElementById('video');
328
-
329
- document.getElementById('counter').innerHTML = "";
336
+
330
-
331
- v.addEventListener("timeupdate", function() {
337
+ video.addEventListener("timeupdate", function(e) {
332
-
338
+
333
- document.getElementById('counter').innerHTML = v.currentTime;
339
+ console.log(video.currentTime);
334
340
 
335
341
  });
336
342
 
337
343
 
338
344
 
339
- //ビデオの再生箇所を検出してカーソルを移動したい
345
+ //ビデオの再生箇所を検出してカーソルを移動したい(途中)
340
346
 
341
347
  var baseSec = Math.floor(v.currentTime);
342
348
 
@@ -362,8 +368,6 @@
362
368
 
363
369
  </div>
364
370
 
365
- <div id-"count">Text</div>
366
-
367
371
  </body>
368
372
 
369
373
  </html>