Làm cách nào để biết phần tử <video> hiện đang phát?

Tôi thấy rằng MediaElement phơi bày giao diện thuộc tính như paused, seeking, và ended. Tuy nhiên, bị thiếu trong danh sách playing.

Tôi biết có những playingsự kiện kích hoạt khi một phần tử bắt đầu phát và timeupdatesự kiện sự kiện định kỳ trong khi phát, nhưng tôi đang tìm cách xác định xem video có đang phát ngay bây giờ hay không . Có cách nào dễ dàng để xác định điều này không?

Gần nhất tôi có là:

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

Nó đã được một thời gian dài nhưng đây là một mẹo hay. Bạn có thể xác định .playingnhư một thuộc tính tùy chỉnh cho tất cả các phần tử phương tiện và truy cập nó khi cần thiết. Đây là cách:

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

Bây giờ bạn có thể sử dụng nó trên <video>hoặc <audio>các phần tử như sau:

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

Không có một thuộc tính cụ thể nào cho biết liệu a MediaElementcó đang phát hay không . Tuy nhiên, bạn có thể suy ra điều này từ trạng thái của các thuộc tính khác. Nếu:

• currentTime lớn hơn 0 và
• paused là sai, và
• ended là sai

thì phần tử hiện đang phát.

Bạn cũng có thể cần phải kiểm tra readyStatexem phương tiện có bị dừng do lỗi hay không. Có thể như thế:

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

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

var videoElement = video.get(0);

if (!videoElement.paused) {} 

Một cách để làm điều đó bằng cách sử dụng Jquery

Xem phản hồi của tôi tại đây: Thẻ video HTML5, javascript để phát hiện trạng thái phát?

Về cơ bản, như đã nói trước đây không có thuộc tính nào để kiểm tra nhưng theo thông số kỹ thuật thì đó là sự kết hợp của các điều kiện.

Tôi đã phải đối mặt với cùng một vấn đề. Giải pháp rất đơn giản và dễ hiểu:

// 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");
};