Question

我正在尝试在HTML5视频播放器旁边实现我自己的视频控件，但我在使用Javascript时遇到了困难。

我的HTML：

<div align=center id='videoPlayerContainer' class='videoContainer'>
    <video class='videoPlayer' id='player' preload>Your browser does not support the HTML5 video tag.</video>

    <div align=center id='videoPlayerSeekBar' class='videoSeekBar'>
    <input type='range' id='seek-Bar' value='0'>
    </div>

    <div align=center id='videoPlayerControls' class='videoControls'>
        <img src='PlayButton.png' id='playPauseButton' class='play'/>
        <img src='StopButton.png' id='stopButton' class='stop' />
        <input type='range' id='videoVolumeBar' min='0' max='1' step='0.1' 
    </div>
</div>

我的Javascript：

//Video
var videoPlayer = document.getElementById('player');

//Buttons
var playButton = document.getElementById('playPauseButton');
var stopButton = document.getElementById('stopButton');

//Sliders
var seekBar = document.getElementById('seek-Bar');
var volumeBar = document.getElementById('videoVolumeBar');

//Event listener for the play/pause button
playButton.addEventListener('click', function() {
    if(videoPlayer.paused == true) {
        videoPlayer.play();
        playButton.src = 'PauseButton.png';
    }
    else {
        videoPlayer.pause();
        playButton.src = 'PlayButton.png';
    }
});

//Event listener for the stop button
stopButton.addEventListener('click', function() {
    if(videoPlayer.paused == true) {
        videoPlayer.currentTime = 0;
    }
    else {
        videoPlayer.pause();
        videoPlayer.currentTime = 0;
    }
});

//Event listener for the seek bar
seekbar.addEventListener('change', function() {
    var time = videoPlayer.duration * (seekBar.value / 100);
    video.currentTime = time;
});

//Move the seek bar along as the video plays
videoPlayer.addEventListener('timeupdate', function() {
    var value = (100 / video.duration) * video.currentTime;
    seekBar.value = value;
});

//Event listener for the volume bar
volumeBar.addEventListener('change', function() {
    video.volume = volumeBar.value;
});

播放/暂停按钮和停止按钮都可正常工作，但搜索栏和音量按钮却没有。我收到错误 - 未捕获的ReferenceError：未定义seekBar。

我是Javascript的新手但是已经研究了这个问题，并且看到了Javascript Variable Hoisting的提及，但是一直无法找到解决我的错误的解决方案。因为我对Javascript没有经验，所以我一直使用以下链接来帮助我控制代码：http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos

非常感谢任何帮助！

由于

未捕获的ReferenceError：未定义变量

0 个答案: