html5 play event vs playing event in video tag

Question

I'm reading documentation on the HTML5 video tag and don't totally understand it. If the user clicks a play button, or the play arrow on the control bar, I would think that you have just one event, and that event would indicate that the video is playing.

But I read that: 'play' fires when the audio/video has been started or is no longer paused 'playing' fires when the audio/video is ready to play after having been paused or stopped for buffering. It sounds like the second one only happens if you pause the video and then play it again, while the first one happens then, but also happens when you first start a video. But why do that? Why not just one event?

Answer 1

The reason for the difference is that once you click the play button (or call the play method), the paused state is false and the play event will fire, but that's no guarantee that the video will actually start playing. It's just "trying" to play.

If at any point the video doesn't have enough data, then it will appear to pause (though, again, paused will be false) and the waiting event will fire. Once there is enough data (and readyState is greater than or equal to HAVE_FUTURE_DATA), the playing event will fire and the video will resume.

So, for practical purposes, play is good for setting a visual indicator of play state, like the icon on a play/pause toggle button. Use playing if you want to know when the video is actually playing. For example, you might want to show a spinning "loading" icon when the waiting event fires, and then remove that icon when playing fires.

(Aside from not having enough data, there are are other reasons that the video will not play, even though you want it to, but those may not cause the waiting and playing events to fire. More details on that in the HTML standard.)