视频的js音频滑块不响应任何输入

Question

我是编码新手，不知道自己在做什么。这是我的 js，用于视频旁边的一个非常简单的音频滑块。

<script type="text/javascript">        
    var video = document.getElementById('video1');
    var volumecontrol = document.getElementById('volume1');
    var setVolume = function() {
        video.volume = this.value / 100;
    };
    volumecontrol.addEventListener('change',setVolume);
    volumecontrol.addEventListener('input',setVolume);
</script>

这是相关的 HTML 代码。

<div class="video">
        <video controls autoplay muted loop id="video1"><source src="video.mp4" type="video/mp4"></video></div>
<div class="slidecontainer">
        <input type="range" oninput="setVolume(this.value)" onchange="setVolume(this.value)" min="1" max="100" value="1" step="1" class="slider" id="volume1"></div>

我在控制台中得到的错误如下所示：

Uncaught TypeError: Cannot read property 'addEventListener' of null at volumecontrol.addEventListener('change',setVolume);

求助...

Answer 1

是你的<script> </script>在<head> </head>标签里面，因为如果脚本在html之前加载，document.getElementById('volume1')会是null

Answer 2

LMAO。好的。我在视频上激活了 muted 标签。哈哈... 请忽略我的愚蠢，谢谢。

我添加了以下代码以允许自动静音播放。

var unmute = function() {
        video.muted = false;
    }
volumecontrol.addEventListener('change',unmute);
volumecontrol.addEventListener('input',unmute);

视频的js音频滑块不响应任何输入

js audio slider for video not responding to any input

html

javascript

html5-video

html5-audio