播放暫停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

回答

相關問題