質問編集履歴
5
再生位置取得・mousemoveイベント取得 説明文変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
(3) 計算された間隔×再生位置で遷移先の時間を確定
|
|
18
18
|
と実装時の予想を立てています。
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
今のところ現在の再生位置取得と、コントロールバー上でのmousemoveイベント取得までできました。
|
|
21
|
+
取得したこれらの情報をカーソル側に伝えてカーソルを動かす方法を考えているところです。
|
|
21
22
|
|
|
22
23
|
またプレーヤー再生位置とカーソルの連動ロジックについてはまだ考え中なのですが、もし良い案がありましたら共有いただけると幸いです。
|
|
23
24
|
|
4
コントロールバー上のmousemoveを検出
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -172,8 +172,9 @@
|
|
|
172
172
|
});
|
|
173
173
|
|
|
174
174
|
//ビデオの再生箇所を検出してカーソルを移動したい(途中)
|
|
175
|
+
video_.addEventListener('mousemove', (e) => {
|
|
175
|
-
|
|
176
|
+
console.log('mousemove');
|
|
176
|
-
|
|
177
|
+
});
|
|
177
178
|
//棒グラフの部分をクリックすると、カーソルと再生位置をさせたい
|
|
178
179
|
|
|
179
180
|
}
|
3
currentTime取得
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -165,10 +165,11 @@
|
|
|
165
165
|
tooltipEl.style.pointerEvents = 'none';
|
|
166
166
|
|
|
167
167
|
//デバッグ：currentTime表示
|
|
168
|
-
var
|
|
168
|
+
var video_ = document.querySelector('video');
|
|
169
|
-
|
|
169
|
+
video_.addEventListener("timeupdate", (e) => {
|
|
170
|
+
var currentTime_ = video_.currentTime;
|
|
170
|
-
|
|
171
|
+
console.log(currentTime_);
|
|
171
|
-
|
|
172
|
+
});
|
|
172
173
|
|
|
173
174
|
//ビデオの再生箇所を検出してカーソルを移動したい(途中)
|
|
174
175
|
var baseSec = Math.floor(v.currentTime);
|
2
getElementById -> querySelector
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
tooltipEl.style.pointerEvents = 'none';
|
|
166
166
|
|
|
167
167
|
//デバッグ：currentTime表示
|
|
168
|
-
var video = document.
|
|
168
|
+
var video = document.querySelector('video');
|
|
169
169
|
video.addEventListener("timeupdate", function(e) {
|
|
170
170
|
console.log(video.currentTime);
|
|
171
171
|
});
|
1
②ビデオコントロールバーに関する質問・画像を追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -10,12 +10,16 @@
|
|
|
10
10
|
* 棒グラフの位置をクリックするとコントロールバーの対応する再生位置に遷移させたい。
|
|
11
11
|
|
|
12
12
|
サンプルは映像が30秒で、棒グラフの項目数も30個なのでちょうど１項目＝１秒で対応していますが、将来この関係が変化した際でも対応できるようにしたいです。
|
|
13
|
+
|
|
13
14
|
今のところは
|
|
14
15
|
(1) 動画の再生位置を取得
|
|
15
16
|
(2) 動画の長さ÷グラフ項目数を出して、１項目あたりの間隔を計算
|
|
16
17
|
(3) 計算された間隔×再生位置で遷移先の時間を確定
|
|
17
18
|
と実装時の予想を立てています。
|
|
19
|
+
|
|
20
|
+
デバッグ用にvideoオブジェクトのcurrentTimeをconsole.logで表示させようとしていますが取れませんでした、これはコードのロジックが問題あるのでしょうか。
|
|
21
|
+
|
|
18
|
-
|
|
22
|
+
またプレーヤー再生位置とカーソルの連動ロジックについてはまだ考え中なのですが、もし良い案がありましたら共有いただけると幸いです。
|
|
19
23
|
|
|
20
24
|
|
|
21
25
|
## 余談・疑問
|
|
@@ -160,14 +164,13 @@
|
|
|
160
164
|
tooltipEl.style.padding = tooltipModel.padding + 'px ' + tooltipModel.padding + 'px';
|
|
161
165
|
tooltipEl.style.pointerEvents = 'none';
|
|
162
166
|
|
|
163
|
-
//
|
|
167
|
+
//デバッグ：currentTime表示
|
|
164
|
-
var
|
|
168
|
+
var video = document.getElementById('video');
|
|
165
|
-
document.getElementById('counter').innerHTML = "";
|
|
166
|
-
|
|
169
|
+
video.addEventListener("timeupdate", function(e) {
|
|
167
|
-
|
|
170
|
+
console.log(video.currentTime);
|
|
168
171
|
});
|
|
169
172
|
|
|
170
|
-
//ビデオの再生箇所を検出してカーソルを移動したい
|
|
173
|
+
//ビデオの再生箇所を検出してカーソルを移動したい(途中)
|
|
171
174
|
var baseSec = Math.floor(v.currentTime);
|
|
172
175
|
|
|
173
176
|
//棒グラフの部分をクリックすると、カーソルと再生位置をさせたい
|
|
@@ -180,7 +183,6 @@
|
|
|
180
183
|
var myGraph = new Chart( canvas, graph );
|
|
181
184
|
</script>
|
|
182
185
|
</div>
|
|
183
|
-
<div id-"count">Text</div>
|
|
184
186
|
</body>
|
|
185
187
|
</html>
|
|
186
188
|
```
|