HTML5 Javascript 播放/暂停按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20616430/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Javascript Play/Pause button
提问by rowefx
I'm attempting to customise the control buttons on my video player. Currently I have a button that plays and pauses my video. This is working great. Though I want a visual representation of the play and pause buttons, instead of them staying the same when in the paused state or when the video is playing. I plan on having two seperate images for play and pause.
我正在尝试自定义视频播放器上的控制按钮。目前我有一个按钮可以播放和暂停我的视频。这很好用。虽然我想要播放和暂停按钮的视觉表示，而不是在暂停状态或视频播放时保持不变。我计划有两个单独的图像用于播放和暂停。
My problem is that I can't quite get my javascript to toggle my buttons, I'm thinking the best way to toggle the buttons is when one is paused, hide one element and when the video is playing hide the other element.
我的问题是我不能完全让我的 javascript 来切换我的按钮，我认为切换按钮的最好方法是当一个按钮暂停时隐藏一个元素，当视频播放时隐藏另一个元素。
So here is what I have currently:
所以这是我目前所拥有的：
function playPause() {
mediaPlayer = document.getElementById('media-video');
if (mediaPlayer.paused)
mediaPlayer.play();
$('.play-btn').hide();
else
mediaPlayer.pause();
$('.pause-btn').hide();
}
Any help is greatly appreciated.
任何帮助是极大的赞赏。
回答by ChoiZ
You need to use more Braces '{}' in if and else
您需要在 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();
}
}
I think it's works well.
我认为它运作良好。
回答by push_ebp
For e.g.:
例如：
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();
}}
Source: http://www.creativebloq.com/html5/build-custom-html5-video-player-9134473
来源：http: //www.creativebloq.com/html5/build-custom-html5-video-player-9134473
回答by sheelpriy
/* in Jquery*/
$('#play-pause-button').click(function () {
if ($("#media-video").get(0).paused) {
$("#media-video").get(0).play();
}
else {
$("#media-video").get(0).pause();
}
});
Video is a DOM element not the javascript function;
视频是一个 DOM 元素而不是 javascript 函数；
