播放暫停 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 和播放/暫停按鈕。

編輯：在 vanilla JavaScript 中：視頻不是函數，而是 DOM 的一部分，因此使用

 video.play(); 

代替

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

Answer 2

據我所知，視頻不是函數，為什么要加括號？ 那是你的錯誤。

所以，而不是video()只是使用video

Answer 3

這種工作（使用 jquery）在 Chrome v22、Firefox v15 和 IE10 中對我有用：

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

此處的preventDefault停止了您看到的跳幀問題，但隨后它會破壞控制部分上的其他按鈕，例如全屏等。

看起來不容易，為什么要這樣做？ 我原以為供應商會默認點擊播放，這似乎是合乎邏輯的事情。 :|

Answer 4

這是最簡單的解決方案

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