Phát hiện xem phần tử Video HTML5 có đang phát

Question

Tôi đã xem qua một số câu hỏi để tìm hiểu xem phần tử HTML5 có đang phát hay không, nhưng không thể tìm thấy câu trả lời. Tôi đã xem xét các tài liệu W3 và nó có một sự kiện có tên là "chơi" nhưng tôi dường như không thể làm cho nó hoạt động.

Đây là mã hiện tại của tôi:

var stream = document.getElementsByTagName('video'); 

function pauseStream() { 
    if (stream.playing) { 
    for (var i = 0; i < stream.length; i++) { 
     stream[i].pause(); 
     $("body > header").addClass("paused_note"); 
     $(".paused_note").text("Stream Paused"); 
     $('.paused_note').css("opacity", "1"); 
    } 
    } 
} 

Answer 1

Lưu ý: Câu trả lời này đã được đưa ra trong năm 2011. Vui lòng kiểm tra tài liệu cập nhật trên HTML5 video trước khi tiếp tục.

Nếu bạn chỉ muốn biết liệu video có bị tạm dừng hay không, hãy sử dụng cờ stream.paused.

Không có thuộc tính cho yếu tố video để nhận trạng thái phát. Nhưng có một sự kiện "chơi" sẽ được kích hoạt khi nó bắt đầu chơi. Sự kiện "đã kết thúc" được kích hoạt khi nó ngừng phát.

Vì vậy, giải pháp là

1. decalre một biến videoStatus
2. thêm xử lý sự kiện cho các sự kiện khác nhau của video
3. cập nhật videoStatus sử dụng xử lý sự kiện
4. sử dụng videoStatus để xác định trạng thái của video

Trang này sẽ cung cấp cho bạn ý tưởng hay hơn về sự kiện video. Phát video trên trang này và xem các sự kiện được kích hoạt như thế nào.
http://www.w3.org/2010/05/video/mediaevents.html

Answer 2

tôi gặp phải một vấn đề tương tự mà tôi đã không thể thêm người nghe sự kiện để các cầu thủ cho đến khi sau nó đã bắt đầu chơi, vì vậy @ phương pháp Diode của may sẽ không hoạt động. Giải pháp của tôi đã được kiểm tra nếu thuộc tính "bị tạm dừng" của người chơi đã được đặt thành true hay không. Điều này hoạt động vì "bị tạm dừng" được đặt thành true ngay cả trước khi video bắt đầu phát và sau khi video kết thúc, không chỉ khi người dùng nhấp "tạm dừng".

Answer 3

Dường như với tôi như bạn chỉ có thể kiểm tra !stream.paused.

Answer 4

jQuery(document).on('click', 'video', function(){ 
     if (this.paused) { 
      this.play(); 
     } else { 
      this.pause(); 
     } 
}); 

Answer 5

Đây là những gì chúng tôi đang sử dụng tại http://www.develop.com/webcasts để ngăn mọi người vô tình rời khỏi trang khi video đang phát hoặc tạm dừng.

$(document).ready(function() { 

    var video = $("video#webcast_video"); 
    if (video.length <= 0) { 
     return; 
    } 

    window.onbeforeunload = function() { 
     var htmlVideo = video[0]; 
     if (htmlVideo.currentTime < 0.01 || htmlVideo.ended) { 
      return null; 
     } 

     return "Leaving this page will stop your video."; 
    }; 
} 

Answer 6

Tôi chỉ nhìn vào liên kết @tracevipin gia tăng (http://www.w3.org/2010/05/video/mediaevents.html), và tôi thấy một tài sản có tên là "dừng lại".

Tôi đã thử nghiệm nó và nó hoạt động tốt.

Answer 7

Đây là mã của tôi - bằng cách gọi hàm play() video phát hoặc tạm dừng và hình ảnh nút được thay đổi.

Bằng cách gọi hàm volume() âm lượng được bật/tắt và hình ảnh nút cũng thay đổi.

function play() { 
    var video = document.getElementById('slidevideo'); 
    if (video.paused) { 
    video.play() 
    play_img.src = 'img/pause.png'; 
    } 
    else { 
    video.pause() 
    play_img.src = 'img/play.png'; 
    } 
} 

function volume() { 
    var video = document.getElementById('slidevideo'); 
    var img = document.getElementById('volume_img'); 
    if (video.volume > 0) { 
    video.volume = 0 
    volume_img.src = 'img/volume_off.png'; 
    } 
    else { 
    video.volume = 1 
    volume_img.src = 'img/volume_on.png'; 
    } 
} 

Answer 8

câu trả lời của tôi tại How to tell if a <video> element is currently playing?:

MediaElement không có một tài sản mà nói về nếu chơi của mình hay không. Nhưng bạn có thể xác định thuộc tính tùy chỉnh cho nó.

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 yếu tố như thế này:

if(document.querySelector('video').playing){ 
    // Do anything you want to 
} 

Answer 9

Thêm eventlisteners đến yếu tố phương tiện truyền thông của bạn. sự kiện có thể có thể được kích hoạt là: Audio and video media events

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
 
<title>Html5 media events</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body > 
 
    <div id="output"></div> 
 
    <video id="myVideo" width="320" height="176" controls autoplay> 
 
     <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"> 
 
     <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg"> 
 
    </video> 
 
    <script> 
 
     var media = document.getElementById('myVideo'); 
 

 
     // Playing event 
 
     var isPlaying = function(e) { 
 
      $("#output").html("Playing event triggered"); 
 
     }; 
 
     // Pause event 
 
     var onPause = function(e) { 
 
      $("#output").html("Pause event triggered"); 
 
     }; 
 
     // Volume changed event 
 
     var onVolumechange = function(e) { 
 
      $("#output").html("Volumechange event triggered"); 
 
     }; 
 
     // Seeking event 
 
     var onSeeking = function(e) { 
 
      $("#output").html("Seeking event triggered"); 
 
     }; 
 
     
 
     media.addEventListener("playing", isPlaying, false);  
 
     media.addEventListener("pause", onPause, false); 
 
     media.addEventListener("seeking", onSeeking, false); 
 
     media.addEventListener("volumechange", onVolumechange, false); 
 
    </script> 
 
</body> 
 
</html>

Answer 10

một ví dụ chút

var audio = new Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3') 
 

 
if (audio.paused) { 
 
    audio.play() 
 
} else { 
 
    audio.pause() 
 
}

Answer 11

tôi chỉ làm cho nó rất đơn giản sử dụng onpause và tài sản onplay của thẻ video html. Tạo một số hàm javascript để chuyển đổi một biến toàn cầu để trang biết trạng thái của video cho các chức năng khác.

javascript dưới đây:

// onPause function 
    function videoPause() { 
     videoPlaying = 0; 
    } 

    // onPause function 
    function videoPlay() { 
     videoPlaying = 1; 
    } 

Html Video tag:

<video id="mainVideo" width="660" controls onplay="videoPlay();" onpause="videoPause();" > 
          <source src="video/myvideo.mp4" type="video/mp4"> 

          </video> 

hơn bạn có thể sử dụng onclick javascript để làm điều gì đó tùy thuộc vào tình trạng biến trong trường hợp này videoPlaying.

hy vọng điều này sẽ giúp ...