【Riot.js】riotでjQuery UIのsliderのようなハンドルを使う方法

Question

動画の操作にハンドルを使いたいんですが、noUiSliderだと動画の再生時間に紐付けると動作がすごく遅くなります
こればっかりは自作しかないのでしょうか？

<div id="form-video">
        <label for="video">動画を選択</label>
        <input id="video" type="file" accept="video/*" onchange="{ changed }"></input>
        <div class="video-wrapper" if={ preview }>
            <video preload="auto" ref="video" onloadeddata="{ loaded }" ontimeupdate="{ playing }">
                <source src="{ previewSrc }" type="video/mp4">
            </video>
            <div class="controls">
                <div class="movie-state" onclick="{ clickState }">
                    <i class="fa fa-play click_state" aria-hidden="true"></i>
                </div>
                <div class="timeline" ref="timeline"></div>
                <div class="time">
                    <div class="now-time">{ playTime }</div>
                    <div class="slash">/</div>
                    <div class="all-time">{ totalTime }</div>
                </div>
            </div>
        </div>
    </div>

        this.loaded = function() {

            var totalSecond = Math.floor(this.refs.video.duration)
            this.playTime = '0:00'
            this.totalTime = timeFormat(this.refs.video.duration)



            noUiSlider.create(this.refs.timeline, {
                start: 0,
                connect: true,
                orientation: "horizontal",
                step: 0.000001,
                range: {
                    'min': 0,
                    'max': totalSecond
                },
                format: wNumb({
                    decimals: 0
                })
            })

            this.refs.timeline.noUiSlider.on('start', function(e) {
                tag.refs.video.pause()
            })

            this.refs.timeline.noUiSlider.on('end', function(e) {
                if (playState) {
                    tag.refs.video.play()
                }
            })

            this.refs.timeline.noUiSlider.on('slide', function(e) {
                tag.refs.video.currentTime = e[0]
            })

        }

Comments

[turbgraphics200]

どのようなコードを書いたのかを記載してほしいです。

Answer 1

たぶん、シークバーのような実装をしたいのだと思いますが、そんな重くなるようなところはないのですが
ontimeupdateではなくrequestAnimationFrame()使用したほうがいいです。
サンプル

Comments

[NobumitsuHata]

noUiSliderのcreateメッソドのオプションにturbgraphics200さん同様animateを追加したところハンドルがスムーズに動き、ハンドルに合わせて綺麗に動画の再生位置が変更されました！
ありがとうございます。

ontimeupdateではなくrequestAnimationFrame()使用したほうが軽くなりますか？

[turbgraphics200]

ontimeupdateのほうがイベント発生率が低いため、シークポインタの移動がスムーズじゃありません。

[NobumitsuHata]

ontimeupdateと違って一時停止の場合も繰り返しになりますが、ブラウザへの負担はどうなんでしょうか？

[turbgraphics200]

負荷はontimeupdateと比べてそれほど変わらないと思います(ある意味ontimeupdateよりも低いかも)。
それと、一時停止の場合はcancelAnimationFrameして、再生時に再度requestAnimationFrame()すればいいのではないでしょうか。
もし負荷が気になるようでしたら、外部のUI使わずに、videoのcontrols使ったほうがいいと思うのですが。

[NobumitsuHata]

ありがとうございます！
cancelAnimationFrame使いました！
完璧です！

turbgraphics200さんお手数おかけしました！