播放暂停html5视频javascript

我有一个功能，当我点击播放机中显示的海报图像时播放视频，它似乎可以工作：

var video = document.getElementById('player');
video.addEventListener('click',function(){
    video().play();
},false);

在html5视频标签中，我有如下内容： id=“player”onclick=“this.play（）；”

问题是，如果我按下视频控件上的“暂停”，它实际上会暂停，这很好，但如果我按下视频控件上现在的“播放”按钮，我可以看到按钮在瞬间再次变为暂停，然后它又变回播放按钮。所以我按play，它只播放几帧，然后在暂停时返回。再次播放的唯一方法是单击视频查看区域

使用控制栏“播放/暂停”按钮时，如何使其停止返回暂停状态，以及单击视频查看区域时如何使其暂停

我尝试了以下方法，但无效：

var video = document.getElementById('player');
video.addEventListener('click',function(){
    if(video.paused){
        video().play();
    }else{
        video.pause();
    }
},false);

---

我想在按下实际观看区域时播放视频的原因是，在Android上很难找到微小的控制栏播放按钮，因为它太小了，人们只需按下观看区域就可以更容易地播放。在Firefox中，视频播放器在我点击查看区域时播放，并暂停，这正是我想要实现的，它也可以在不需要任何javascript的情况下实现这一点。在安卓系统中，当我按下查看区域时，视频根本无法播放。因此，我基本上是想强迫Android浏览器像Firefox一样在本机上运行。

从我看来，视频不是一种功能，那么为什么要用括号呢？那是你的错误

因此，在Chrome v22、Firefox v15和IE10中，不要使用

video（）

只需使用

video
这类作品（使用jquery）即可：

$('video').on('click', function (e) {
    if (this.get(0).paused) {
        this.get(0).play();
    }
    else {
        this.get(0).pause();
    }
    e.preventDefault();
});

此处的
preventDefault
停止了您看到的帧跳转问题，但随后它中断了控制部分上的其他按钮，如全屏等

看来做这件事不容易，为什么？我原以为卖主会在默认情况下点击播放，这似乎是合乎逻辑的做法|

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

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

编辑：
在香草JavaScript中：
视频不是一个函数，而是DOM的一部分

 video.play(); 

而不是

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

这是最简单的解决办法

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', '');
    });
});

我相信，这是写下你想要实现的目标的最简单、最简单的方法：

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

当然，登录到控制台只是为了举例说明
 请浏览我浏览过的这个链接，在Firefox中没有任何东西可以帮助解决这个问题；请看@SaurabhLP Apple在2012年停止了windows版的Safari，所以我认为我们不应该再为此担心了。编写一些解释和代码始终是一个很好的做法。谢谢添加上下文。（来自评论）。最简单的解决方案是什么？这假设您正在使用video.js，这是一个第三方库。在你的答案上加上一些上下文就好了。
            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();
            }
            };

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

document.getElementById("play").onclick = function(){
    if (document.getElementById("videoPlay").paused){
        document.getElementById("videoPlay").play();
    } else {
        document.getElementById("videoPlay").pause(); 
    }
}