播放暂停html5视频javascript

Question

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

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

在html5视频标签中,我有类似的内容:id ="player"onclick ="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本身一样.

有任何想法吗？

Answer 1

$('#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**

Answer 2

从我看来,视频不是一个功能,为什么你有括号？那是你的错误.

所以不要video()只使用video