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

【问题标题】：I am having troubles with my play/pause button on my customised video我的自定义视频上的播放/暂停按钮出现问题
【发布时间】：2014-02-13 03:21:51
【问题描述】：

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一无所知。我尝试过反复试验，但似乎没有任何效果。

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

我该如何解决这个问题？

【问题讨论】：

标签： jquery video html5-video

【解决方案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>

【讨论】：