播放暂停HTML5视频的JavaScript

我有一个播放视频时，我点击播放器显示海报图像上，它似乎工作的函数：播放暂停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浏览器像本机一样行事。

任何想法？

来源

2012-04-26 Jizbo Jonez

请到通过这个环节 http://stackoverflow.com/questions/4646998/play-pause-html-5-video-using-jquery – Vicky 2012-04-26 06:43:54

我通过它去并没有什么有帮助这个问题 – 2012-04-26 20:01:10

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

来源

2014-01-09 07:21:33 sheelpriy

无法在Windows中的Safari中运行... – SaurabhLP 2016-06-18 12:13:25

@SaurabhLP苹果已于2012年停止Windows版本的Safari，所以我认为我们不应该再为此担心了。 – sheelpriy 2017-11-22 08:30:11

从我看到的视频不是一个函数，那么为什么你会有括号？这是你的错误。

所以不是video()只使用video

来源

2012-06-04 16:34:07

最简单的解决方案：阅读代码。 ++ – dudewad 2016-02-09 20:01:26

这种工作（使用jQuery）我在Chrome V22，火狐V15和IE10的：

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

的preventDefault停在这里的帧跳跃问题，你看，但它然后打破控制部分上的其他按钮，如全屏等。

它看起来不容易为什么这样做？我认为厂商默认会有点击播放，这似乎是合乎逻辑的事情。：|

来源

2012-09-27 13:27:19 Sprintstar

$('#video-id').click(function() { 
    // jQuery sets this as the DOM element that triggered the event 
    // no need to wrap it in jQuery $(this) and unwrap it again $(this).get(0) 
    if (this.paused) { 
     this.play(); 
    } else { 
     this.pause(); 
    } 
});

来源

2014-07-23 12:38:23

Firefox中损坏;见http://stackoverflow.com/questions/28353352/click-handler-on-video-conflicts-with-firefoxs-native-behaviour/ – 2015-02-24 22:49:16

这是最简单的解决方案

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

来源

2015-10-21 08:30:22

这是，我认为，最简单，最简单的方式来写你想达到什么目的：

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

登录到控制台，当然，仅仅是一个例子。

来源

2017-05-09 06:43:33

播放暂停HTML5视频的JavaScript

回答

相关问题