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

问题描述

我有一个功能，当我点击播放器中显示的海报图片时，它可以播放视频，并且似乎可以正常工作:

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

在 html5 视频标签中，我有类似的内容:id="player" onclick="this.play();"

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

我想在按下实际观看区域时播放视频的原因是在Android上很难找到微小的控制栏播放按钮，因为它太小了，人们只需按一下观看就会更容易区域来让它运行.在 Firefox 中，当我点击查看区域和暂停时，视频播放器会播放，这正是我想要发生的，而且它也不需要任何 javascript 就可以做到这一点.在 Android 中，当我按下查看区域时，视频根本无法播放.所以我基本上是在尝试强制 Android 浏览器像 Firefox 本身一样运行.

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.

推荐答案

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

我已经在 jQuery 中完成了这项工作，它既简单又快速.要尝试它，您只需使用视频标签的 ID 和播放/暂停按钮.

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.

在原生 JavaScript 中:视频不是函数，而是 DOM 的一部分，因此使用

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

 video.play(); 

代替

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

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