HTML5 Javascript 播放/暂停按钮答案

【问题标题】：HTML5 Javascript Play/Pause buttonHTML5 Javascript 播放/暂停按钮
【发布时间】：2013-12-16 17:02:34
【问题描述】：

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

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

这就是我目前拥有的：

function playPause() { 

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

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

}

非常感谢任何帮助。

【问题讨论】：

这只是一个错字或你的if/else statement 是wooooong？（您需要添加{} 来包装if 和else 块）
$('.play-btn').hide() 不应该在if 语句中吗？与else?中的暂停按钮相同？
if else 语句周围缺少大括号。

标签： javascript jquery css html video

【解决方案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();
    }
}

我认为它运作良好。

【讨论】：

另外，根据范围，建议 OP 改用 var mediaPlayer = ...。
谢谢，我觉得语法有点不对劲！

【解决方案2】：

例如：

function togglePlayPause() {
// If the mediaPlayer is currently paused or has ended
if (mediaPlayer.paused || mediaPlayer.ended) {
    // Change the button to be a pause button
    changeButtonType(playPauseBtn, 'pause');
    // Play the media
    mediaPlayer.play();
}
// Otherwise it must currently be playing
else {
    // Change the button to be a play button
    changeButtonType(playPauseBtn, 'play');
    // Pause the media
    mediaPlayer.pause();
}}

来源：http://www.creativebloq.com/html5/build-custom-html5-video-player-9134473

【讨论】：

很高兴您在此处添加了代码！我还建议有一个解释总是有帮助的。您的 cmets 很好地展示了每一行的作用，但在代码块之外进行一些解释也是有益的。

【解决方案3】：

/* in Jquery*/

$('#play-pause-button').click(function () { 
   if ($("#media-video").get(0).paused) {
        $("#media-video").get(0).play(); 
     } 
   else {
        $("#media-video").get(0).pause(); 
    }
});

视频是一个 DOM 元素，不是 javascript 函数；

【讨论】：