Question

基本上我正在为html5视频元素创建自定义视频控制栏。一切正常，除了我使用范围输入元素的搜索栏。

现在，对于控制栏中的每个元素，我将它分配给js函数中的变量，该函数在窗口加载和添加事件侦听器时调用。像这样：

function handleWindowLoad() {
    var video = document.getElementById ("video");
    var playPause = document.getElementById ("playPause");
    var muteUnmute = document.getElementById ("muteUnmute");    
    var fullScreen = document.getElementById ("toggleFullscreen");
    var scrubSlider = document.getElementById ("seekBar");
    playPause.addEventListener ("click", togglePlay);
    muteUnmute.addEventListener("click", toggleMute);
    fullScreen.addEventListener("click", toggleFullscreen);
    scrubSlider.addEventListener("change", scrubVideo);
}

所有事件处理程序都顺利工作。

e.g：

function togglePlay() {
if (video.paused) {
    video.play();
    playPause.innerHTML = "Pause";
}
else {
    video.pause();
    playPause.innerHTML = "Play";
}
}

工作正常。

但是scrubSlider事件处理程序scrubVideo()：

function scrubVideo() {
var scrubTime = video.duration * (scrubSlider.value/100);
video.currentTime = scrubTime;  
}

抛出＆＃34; scrubSlider undefined＆＃34;错误。

事件监听器正常工作scrubVideo(）在预期时调用，但在handleWindowLoad()函数之外我无法访问scrubSlider。我尝试过此错误的唯一方法是使用document.getElementById代替var或全局声明scrubSlider。

我发现这很有趣，因为scrubSlider与其他元素之间的唯一区别是所讨论的元素是<input＆gt;而不是<button>并且正在收听的事件是＆＃34;更改＆＃34;而不是＆＃34;点击＆＃34;。

这个错误是HTML元素的某种固有功能的结果还是我忽略的一些更微不足道的事情？

Here's a JSFiddle

Answer 1

如果我看得见，您可以在scrubSlider函数中定义handleWindowLoad（这使其仅在该范围内可用），并尝试在scrubVideo中访问它。为了使它工作做这样的事情：

var scrubSlider;
function handleWindowLoad() {
    scrubSlider = document.getElementById ("seekBar");
    ...
}

编辑：我不知道的有趣的事情：如果您订阅了id事件，显然您可以通过javascript中的DOMContentLoaded来获取html元素。 https://jsfiddle.net/22oqpcLu/1/

因此，这就是您在访问video变量时未定义的原因。我猜您可以scrubSlider访问seekBar。

事件监听器投掷＆＃34; Undefined＆＃34;变量定义明确时出错

1 个答案: