<video>要素が現在再生されているかどうかを確認するにはどうすればよいですか？

Question 1

私はそれを見るのMediaElementのようなインターフェイスが公開する属性paused、seekingとended。ただし、リストにないのはですplaying。

要素の再生が開始されたときに発生するイベントや、再生中に定期的に発生するplayingイベントがあることは知っていますが、ビデオが現在再生されているかどうかを判断する方法を探しています。これを判断する簡単な方法はありますか？timeupdate

私が持っている最も近いものは次のとおりです。

!(video.paused || video.ended || video.seeking || video.readyState < video.HAVE_FUTURE_DATA)

Question 2

久しぶりですが、ここにヒントがあります。.playingすべてのメディア要素のカスタムプロパティとして定義し、必要に応じてアクセスできます。方法は次のとおりです。

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
    get: function(){
        return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
    }
})

これで、<video>または次の<audio>ような要素で使用できます。

if(document.querySelector('video').playing){ // checks if element is playing right now
    // Do anything you want to
}

Question 3

aMediaElementが現在再生されているかどうかを明らかにする特定の属性はありません。ただし、これは他の属性の状態から推測できます。場合：

currentTime がゼロより大きく、
paused は偽であり、
ended 偽です

その後、要素は現在再生中です。

readyStateエラーが原因でメディアが停止したかどうかを確認する必要がある場合もあります。多分そのような何か：

const isVideoPlaying = video => !!(video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2);

Question 4

var video = $('selector').children('video');

var videoElement = video.get(0);

if (!videoElement.paused) {}

Jqueryを使用してそれを行う1つの方法

Question 5

ここで私の応答を参照してください：HTML5ビデオタグ、再生ステータスを検出するためのJavaScript？

基本的に、前に述べたように、チェックする単一のプロパティはありませんが、仕様によれば、それは条件の組み合わせです。

Question 6

私も同じ問題に直面していました。解決策は非常にシンプルで簡単です。

// if video status is changed to "ended", then change control button to "Play Again"
video.onended = function() {
    $("#play_control_button").text("Play Again");
};

// if video status is changed to "paused", then change control button to "Continue Play"
video.onpause = function() {
    $("#play_control_button").text("Continue Play");
};

// if video status is changed to "playing", then change control button to "Stop"
video.onplaying = function() {
    $("#play_control_button").text("Stop");
};