播放暂停 html5 视频 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10327907/
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
play pause html5 video javascript
提问by Jizbo Jonez
I have a function that plays a video when I click on the poster image displayed in the player and it seems to work :
当我点击播放器中显示的海报图像时，我有一个播放视频的功能，它似乎有效：
var video = document.getElementById('player');
video.addEventListener('click',function(){
video().play();
},false);
In the html5 video tag i have something like: id="player" onclick="this.play();"
在 html5 视频标签中，我有类似的内容：id="player" onclick="this.play();"
the problem is if I press pause on the video controls it does in fact pause which is good but then if I press what is now the play button on the video controls I can see the button change to pause again for a split second then it goes back to being a play button again. So I press play and it only plays for a few frames and then goes back at being paused. The only way to make it play again is to click on the video viewing area.
问题是，如果我按下视频控件上的暂停，它实际上会暂停，这很好，但是如果我按下视频控件上现在的播放按钮，我可以看到该按钮再次暂停一秒钟，然后它就开始了再次成为播放按钮。所以我按下播放键，它只播放了几帧，然后又回到暂停状态。让它再次播放的唯一方法是单击视频查看区域。
How can I make it stop going back to pause when using the control bar play/pause button, and how can I make it pause when I click on the video viewing area?
使用控制栏播放/暂停按钮时如何使其停止返回暂停，以及如何在单击视频查看区域时使其暂停？
I have tried the following but it doesn't work :
我已经尝试了以下但它不起作用：
var video = document.getElementById('player');
video.addEventListener('click',function(){
if(video.paused){
video().play();
}else{
video.pause();
}
},false);
The reason I want to have the video play when pressing on the actual viewing area is it is too hard to locate the tiny controlbar play button on Android because it is so small, it would be easier for people to simply press the viewing area to get it going. In Firefox the video player plays when I click on the viewing area as well as pauses, which is exactly what I want to happen and it also does this without any javascript needed. In Android, the video just won't play at all when I press on the viewing area. So I am basically trying to force the Android browser to behave as Firefox does natively.
我想在按下实际观看区域时播放视频的原因是在 Android 上很难找到微小的控制栏播放按钮，因为它太小了，人们只需按一下观看区域即可获得它去。在 Firefox 中，当我点击查看区域和暂停时，视频播放器会播放，这正是我想要发生的，而且它也不需要任何 javascript 就可以做到这一点。在 Android 中，当我按下观看区域时，视频根本无法播放。所以我基本上是在试图强制 Android 浏览器像 Firefox 本身那样运行。
回答by sheelpriy
$('#play-pause-button').click(function () {
var mediaVideo = $("#media-video").get(0);
if (mediaVideo.paused) {
mediaVideo.play();
} else {
mediaVideo.pause();
}
});
I have done this in jQuery, which is simple and fast. To try it, you just need to use the ID of the video tag and your play/pause button.
我已经在 jQuery 中完成了这项工作，它既简单又快速。要尝试它，您只需要使用视频标签的 ID 和播放/暂停按钮。
EDIT:In vanilla JavaScript: a video is not a function, but part of DOM hence use
编辑：在 vanilla JavaScript 中：视频不是函数，而是 DOM 的一部分，因此使用
video.play();
Instead of
代替
video().play() **wrong**
回答by Jizbo Jonez
From what I see, video is not a function, so why do you have parentheses? That's your error.
据我所知，视频不是函数，为什么要加括号？那是你的错误。
So instead of video()just use video
所以而不是video()仅仅使用video
回答by Sprintstar
This kind of works (using jquery) for me in Chrome v22, Firefox v15 and IE10:
这种工作（使用 jquery）在 Chrome v22、Firefox v15 和 IE10 中对我有用：
$('video').on('click', function (e) {
if (this.get(0).paused) {
this.get(0).play();
}
else {
this.get(0).pause();
}
e.preventDefault();
});
The preventDefaulthere stopped the frame jumping problem you see but then it breaks the other buttons on the control section like fullscreen etc.
该preventDefault停在这里你看到的帧跳跃问题，但后来它打破像全屏等控制部分其他按钮
It looks like there is no easy why of doing it? I would have thought venders would have had click to play by default, it seems the logical thing to do. :|
看起来不容易，为什么要这样做？我原以为供应商会默认点击播放，这似乎是合乎逻辑的事情。:|
回答by Tahir Fazal
This is the easiest solution
这是最简单的解决方案
this.on("pause", function () {
$('.vjs-big-play-button').removeClass(
'vjs-hidden'
).css('display', 'block');
this.one("play", function () {
$('.vjs-big-play-button').addClass(
'vjs-hidden'
).css('display', '');
});
});
回答by Chris Bryant
This is, I believe, the most simple and easiest way to write what you're trying to achieve:
我相信，这是编写您要实现的目标的最简单和最简单的方法：
var myVideo = document.getElementById('exampleVideo');
$(myVideo).click(function toggleVideoState() {
if (myVideo.paused) {
myVideo.play();
console.log('Video Playing');
} else {
myVideo.pause();
console.log('Video Paused');
}
});
Logging to the console is, of course, just for illustration.
当然，登录到控制台只是为了说明。
回答by manu
function myFunction(){
var playVideo = document.getElementById('myVideo');
var button = document.getElementById('myBtn');
if (playVideo.paused) {
playVideo.play();
button.innerHTML= "pause";
} else {
button.innerHTML= "play";
playVideo.pause();
}
};
回答by Martin Quintana
$('#video-id').click(function() {
// jQuery sets this as the DOM element that triggered the event
// no need to wrap it in jQuery $(this) and unwrap it again $(this).get(0)
if (this.paused) {
this.play();
} else {
this.pause();
}
});
回答by Vishal Yadav
document.getElementById("play").onclick = function(){
if (document.getElementById("videoPlay").paused){
document.getElementById("videoPlay").play();
} else {
document.getElementById("videoPlay").pause();
}
}
