播放暂停HTML5视频的JavaScript [英] play pause html5 video javascript

问题描述

我有一个播放视频的功能，当我点击播放器中显示的海报图片时，它似乎有效：

  var video = document.getElementById（'player'）; 
 video.addEventListener（'click'，function（）{$ b $ video（）。play（）; 
}，false）; 
  

在html5视频标签中，我有这样的内容：
id =playeronclick = this.play（）;

问题是如果我在视频控件上按暂停，它实际上会暂停，这很好，但如果我按下现在视频控制器上的播放按钮我可以看到按钮更改以再次暂停一秒，然后再次返回播放按钮。所以我按播放，它只播放几帧，然后回到暂停状态。再次播放的唯一方法是点击视频查看区域。

如何使用控制栏播放/暂停时停止回放暂停按钮，当我点击视频查看区域时，如何让它暂停？

我尝试了以下方法，但不起作用：

  var video = document.getElementById（'player'）; 
 video.addEventListener（'click'，function（）{
 if（video.paused）{
 video（）。play（）; 
} else {
 video.pause（）; 
} 
}，false）; 
  

我想在按下实际观看区域时播放视频的原因是太难了在Android上找到微小的控制栏播放按钮，因为它太小了，人们只需按下观看区域即可。在Firefox中，当我单击查看区域并暂停时，视频播放器将播放，这正是我想要发生的情况，并且它也不需要任何JavaScript。在Android中，当我按下观看区域时，视频根本无法播放。因此，我基本上试图强制Android浏览器的行为像本地Firefox一样。

有什么想法？

解决方案

  $（'＃play-pause-button'）。click（function（）{
 if（$（＃media-video ）.get（0）.paused）{
 $（＃media-video）。get（0）.play（）; 
} else {
 $（#media -video）。get（0）.pause（）; 
} 
}）; 
  

嗯，我已经在Jquery中完成了它，它简单而快速。你可以试试它。只需使用视频标签的ID和播放/暂停按钮即可享受$ /

编辑：在香草JavaScript中
：
video不是一个函数，而是DOM的一部分，因此使用

  video.play（）; 
  

而不是

  video（）。play（）**错误** 
  

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

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 like Firefox does natively.

Any ideas?

解决方案

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

well i have done this in Jquery, which simple and fast. you may try it. just need to use the ID of the video tag and your play/pause button enjoy

EDIT: in vanilla JavaScript: video is not a function, but part of DOM hence use

 video.play(); 

instead of

video().play() **wrong**

这篇关于播放暂停HTML5视频的JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！