HTML5 Javascript播放/暂停按钮

-1

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

我的问题是，我不能完全得到我的JavaScript切换我的按钮，我想切换按钮的最佳方式是当一个人暂停，隐藏一个元素，当视频播放时隐藏其他元件。

因此，这里是我目前：

function playPause() { 

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

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

}

任何帮助是极大的赞赏。

来源

2013-12-16 rowefx

它只是一个错字或你的'的if/else statement'是wrooooong？（你需要添加'{}'来包装'if'和'else'块） – BeNdErR

不应该在if语句中使用$（'。play-btn'）。hide（）与'else'中的暂停按钮相同吗？ – Andrew

你错过了if else语句的花括号。 – Terry

你需要，如果使用多个支架“{}”和其他

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

我认为这是行之有效的。

来源

2013-12-16 17:06:53 ChoiZ

另外，取决于范围，OP可能建议使用'var mediaPlayer = ...'来代替。 – Terry

是的@Terry它的更新感谢 – ChoiZ

谢谢，我认为语法有点不合适！ – rowefx

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

来源

2015-08-13 07:58:03 sheelpriy

对于例如为：

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

来源

2015-08-13 08:01:12

很高兴您在此处添加了代码！我也建议有一个解释总是有帮助的。您的评论在显示每行内容的功能方面做得很好，但在代码块外部进行一些解释也很有帮助。 – SuperBiasedMan

HTML5 Javascript播放/暂停按钮

回答

相关问题