播放暂停html5视频javascript

当我点击播放器中显示的海报图像时,我有一个播放视频的功能,它似乎工作:
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本身一样.

有任何想法吗?

解决方法

$('#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中:
视频不是功能,而是DOM的一部分

video.play();

代替

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

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码