teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

コード追加

2017/02/01 03:25

投稿

NobumitsuHata
NobumitsuHata

スコア141

title CHANGED
File without changes
body CHANGED
@@ -1,2 +1,64 @@
1
1
  動画の操作にハンドルを使いたいんですが、noUiSliderだと動画の再生時間に紐付けると動作がすごく遅くなります
2
- こればっかりは自作しかないのでしょうか?
2
+ こればっかりは自作しかないのでしょうか?
3
+
4
+ ```html
5
+ <div id="form-video">
6
+ <label for="video">動画を選択</label>
7
+ <input id="video" type="file" accept="video/*" onchange="{ changed }"></input>
8
+ <div class="video-wrapper" if={ preview }>
9
+ <video preload="auto" ref="video" onloadeddata="{ loaded }" ontimeupdate="{ playing }">
10
+ <source src="{ previewSrc }" type="video/mp4">
11
+ </video>
12
+ <div class="controls">
13
+ <div class="movie-state" onclick="{ clickState }">
14
+ <i class="fa fa-play click_state" aria-hidden="true"></i>
15
+ </div>
16
+ <div class="timeline" ref="timeline"></div>
17
+ <div class="time">
18
+ <div class="now-time">{ playTime }</div>
19
+ <div class="slash">/</div>
20
+ <div class="all-time">{ totalTime }</div>
21
+ </div>
22
+ </div>
23
+ </div>
24
+ </div>
25
+ ```
26
+ ```javascript
27
+ this.loaded = function() {
28
+
29
+ var totalSecond = Math.floor(this.refs.video.duration)
30
+ this.playTime = '0:00'
31
+ this.totalTime = timeFormat(this.refs.video.duration)
32
+
33
+
34
+
35
+ noUiSlider.create(this.refs.timeline, {
36
+ start: 0,
37
+ connect: true,
38
+ orientation: "horizontal",
39
+ step: 0.000001,
40
+ range: {
41
+ 'min': 0,
42
+ 'max': totalSecond
43
+ },
44
+ format: wNumb({
45
+ decimals: 0
46
+ })
47
+ })
48
+
49
+ this.refs.timeline.noUiSlider.on('start', function(e) {
50
+ tag.refs.video.pause()
51
+ })
52
+
53
+ this.refs.timeline.noUiSlider.on('end', function(e) {
54
+ if (playState) {
55
+ tag.refs.video.play()
56
+ }
57
+ })
58
+
59
+ this.refs.timeline.noUiSlider.on('slide', function(e) {
60
+ tag.refs.video.currentTime = e[0]
61
+ })
62
+
63
+ }
64
+ ```