[解決済み] HTML5とJavaScriptによる動画ボリュームスライダー

質問

カスタムUIのビデオプレーヤーを作ろうとしています。 <video> タグといくつかのJavaScriptを使用しています。しかし、ボリュームスライダーが動作しません。

私が試した方法は、1ms間隔で何度も音量を設定する関数を書くことです。明らかに、最後のサイクルからスライダーに触れていなければ、音量は変化しないはずです。1msはあまり長い時間ではないので、100msに増やしてみて、それが役に立つかどうか試してみました。しかし、効果はありませんでした。

スライダーをどの位置に設定しても、音量がデフォルト値のままです。これは、カスタムライブラリを使用せずにできるのでしょうか？もし可能なら、どのようにすればよいのでしょうか？

HTMLです。

    <video id="video" autoplay>
     <source src="/720p.mp4" type="video/mp4">
    </video>
    <input id="vol-control" type="range" min="0" max="100" step="1"></input>

JavaScriptです。

var video = document.getElementById('video');
var volu3 = document.getElementById('vol-control');

window.setInterval(changevolume(), 1);

function changevolume() {

 var x = volu3.value;
 var y = x / 100;

 video.volume = y;

}

解決方法は？

実は、quot;input"の両方を処理するのが一番いいんです。 と イベント（"change"）は、すべての新しいブラウザでスライダーとリアルタイムにボリュームが更新されるようにします（Chrome では明らかに動作しているのに、ユーザーがマウスボタンを離したときにのみ発生することになっており、IE10 では "input" の代わりに "change" を処理しなければなりません）。以下は動作例です。

<video id="video" autoplay>
    <source src="/720p.mp4" type="video/mp4">
</video>
<input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>

<script>
    function SetVolume(val)
    {
        var player = document.getElementById('video');
        console.log('Before: ' + player.volume);
        player.volume = val / 100;
        console.log('After: ' + player.volume);
    }
</script>

...以下はライブデモです。 https://jsfiddle.net/2rx2f8dh/