Question

Here is my html code:

<div id='media-controls'>
<button id='play-pause-button' class='play' title='play' onclick='togglePlayPause();'>Play</button>
</div>

JS:

document.addEventListener("DOMContentLoaded", function() { initialiseMediaPlayer(); }, false);

    mediaPlayer.addEventListener('play', function() {
        changeButtonType(playPauseBtn, 'pause');
    }, false);
    mediaPlayer.addEventListener('pause', function() {
        changeButtonType(playPauseBtn, 'play');
    }, false);


    mediaPlayer.addEventListener('ended', function() { this.pause(); }, false); 
}

function togglePlayPause() {
    if (mediaPlayer.paused || mediaPlayer.ended) {
        changeButtonType(playPauseBtn, 'pause');
        mediaPlayer.play();
    }
    else {
        changeButtonType(playPauseBtn, 'play');
        mediaPlayer.pause();
    }
}

function stopPlayer() {
    mediaPlayer.pause();
    mediaPlayer.currentTime = 0;
}


function replayMedia() {
    resetPlayer();
    mediaPlayer.play();
}

function resetPlayer() {
    progressBar.value = 0;
    mediaPlayer.currentTime = 0;
    changeButtonType(playPauseBtn, 'play');
}

$('.video').click(function(){this.paused?this.play():this.pause();});

我有一个自定义视频播放器。但是我的播放/暂停按钮出现问题。我对Javascript一无所知。我尝试过试验和错误，但似乎没有任何效果。

所以这是我的问题。我只需要一个播放/暂停按钮。当我播放时，图标会变为暂停。哪个好。并在视频结束时更改回播放按钮。但是当我在视频播放时点击暂停按钮时，它不会改回播放按钮，更糟糕的是，视频从头开始重复播放。

我该如何解决这个问题？

Answer 1

我建议只告诉视频播放器播放/暂停点击事件，并根据播放器触发的事件处理图标的切换。

这样，控件将始终反映视频的状态，而无需每次都进行设置。

<video id="myvideo">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

<div id='media-controls'>
<button id='play-pause-button' class='play' title='play' onclick='togglePlayPause();'>Play</button>
</div>

<script>


var mediaPlayer = document.getElementById('myvideo');

mediaPlayer.addEventListener('playing', onPlay);
mediaPlayer.addEventListener('pause', onPause);

function onPlay(e) {
    document.getElementById('play-pause-button').innerHTML = 'Pause';
}
function onPause(e) {
    document.getElementById('play-pause-button').innerHTML = 'Play';
}

function togglePlayPause(){
    if(mediaPlayer.paused === true){
        mediaPlayer.play();
    } else {
        mediaPlayer.pause();
    }

}

</script>

我的自定义视频上的播放/暂停按钮出现问题

1 个答案: