Detect if HTML5 Video element is playing

后端未结

关注

 16  2441

I\'ve looked through a couple of questions to find out if an HTML5 element is playing, but can\'t find the answer. I\'ve looked at the W3 documentation and it has an event n

相关标签:

16条回答

醉梦人生

2020-11-29 01:04

Add eventlisteners to your media element. Possible events that can be triggered are: 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
        media.addEventListener("playing", function() {
            $("#output").html("Playing event triggered");
        });
   
        // Pause event
        media.addEventListener("pause", function() { 
            $("#output").html("Pause event triggered"); 
        });

        // Seeking event
        media.addEventListener("seeking", function() { 
            $("#output").html("Seeking event triggered"); 
        });

        // Volume changed event
        media.addEventListener("volumechange", function(e) { 
            $("#output").html("Volumechange event triggered"); 
        });

    </script>   
</body> 
</html>

0 讨论(0)

梦谈多话

2020-11-29 01:06

Best approach:

function playPauseThisVideo(this_video_id) {

  var this_video = document.getElementById(this_video_id);

  if (this_video.paused) {

    console.log("VIDEO IS PAUSED");

  } else {

    console.log("VIDEO IS PLAYING");

  }

}

0 讨论(0)

眼角桃花

2020-11-29 01:07

var video_switch  = 0;

function play() {

    var media = document.getElementById('video');

    if (video_switch == 0)
    {
        media.play();
        video_switch = 1;
    }
    else if (video_switch == 1)
    {
        media.pause();
        video_switch = 0;
    }
}

0 讨论(0)

故里飘歌

2020-11-29 01:08
Note : This answer was given in 2011. Please check the updated documentation on HTML5 video before proceeding.

If you just want to know whether the video is paused, use the flag stream.paused.

There is no property for video element for getting the playing status. But there is one event "playing" which will be triggered when it starts to play. Event "ended" is triggered when it stops playing.

So the solution is
1. decalre one variable videoStatus
2. add event handlers for different events of video
3. update videoStatus using the event handlers
4. use videoStatus to identify the status of the video
This page will give you a better idea about video events. Play the video on this page and see how events are triggered.
http://www.w3.org/2010/05/video/mediaevents.html
0 讨论(0)
发布评论:

提交评论
- 加载中...
孤街浪徒

2020-11-29 01:12
My answer at How to tell if a <video> element is currently playing?:

MediaElement does not have a property that tells about if its playing or not. But you could define a custom property for it.
```
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
    get: function(){
        return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
    }
})
```
Now you can use it on video or audio elements like this:
```
if(document.querySelector('video').playing){
    // Do anything you want to
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

猫巷女王i

2020-11-29 01:13

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

0 讨论(0)

1 2 3 下一页