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和播放/暂停按钮。

修改在vanilla JavaScript中：视频不是一个功能，但是DOM的一部分因此使用

video.play();

而不是

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

Answer 2

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

而不是video()只使用video

Answer 3

这是最简单的解决方案

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

Answer 4

Chrome v22，Firefox v15和IE10中的这种作品（使用jquery）：

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

此处preventDefault停止了您看到的跳帧问题，但随后又打破了控制部分上的其他按钮，如全屏等。

看起来这样做并不容易？我本以为供应商默认会点击播放，这似乎是合乎逻辑的事情。：|

Answer 5

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

Answer 6

我认为，这是写出你想要实现的目标的最简单，最简单的方式：

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

登录控制台当然只是为了说明。

Answer 7

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

Answer 8

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

播放暂停html5视频javascript

8 个答案: