HTML5 Javascript 播放/暂停按钮

Question

我正在尝试自定义视频播放器上的控制按钮。目前我有一个按钮可以播放和暂停我的视频。这很好用。虽然我想要播放和暂停按钮的视觉表示，而不是在暂停状态或视频播放时保持不变。我计划有两个单独的图像用于播放和暂停。

我的问题是我不能完全让我的 javascript 来切换我的按钮，我认为切换按钮的最好方法是当一个元素暂停时隐藏一个元素，当视频播放时隐藏另一个元素。

所以这是我目前所拥有的：

function playPause() { 

mediaPlayer = document.getElementById('media-video');

if (mediaPlayer.paused) 
  mediaPlayer.play(); 
$('.play-btn').hide();
else 
  mediaPlayer.pause(); 
$('.pause-btn').hide();

}

任何帮助是极大的赞赏。

Answer 1

您需要在 if 和 else 中使用更多的大括号“{}”

function playPause() {
    var mediaPlayer = document.getElementById('media-video');
    if (mediaPlayer.paused) {
        mediaPlayer.play(); 
        $('.pause-btn').show();
        $('.play-btn').hide();
    } else {
        mediaPlayer.pause(); 
        $('.play-btn').show();
        $('.pause-btn').hide();
    }
}

我认为它运作良好。