javascript - 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();
    }
}

我觉得效果不错。