Which play event should be used here?

If all of these work, which would be the best one to use?

Each of these has a different use case.
canplay, canplaythrough, playing, or play

Would it make sense to only use one of them, and if so, which one?

What if I only used play, and none of the others.

Would it make sense to use all of them?

const playingEvents = ["playing"];

Code: https://jsfiddle.net/spaozyxq/28/

Sent when the media has enough data to start playing, after the play
event, but also when recovering from being stalled, when looping media
restarts, and after seeked, if it was playing before seeking.

const playingEvents = ["canplaythrough"];

Code: https://jsfiddle.net/spaozyxq/30/

The user agent estimates that if playback were to be started now, the
media resource could be rendered at the current playback rate all the
way to its end without having to stop for further buffering.

const playingEvents = ["canplay"];

Code: https://jsfiddle.net/spaozyxq/32/

The user agent can resume playback of the media data, but estimates
that if playback were to be started now, the media resource could not
be rendered at the current playback rate up to its end without having
to stop for further buffering of content.

const playingEvents = ["play"];

Code: https://jsfiddle.net/spaozyxq/36/

Sent when the playback state is no longer paused, as a result of the
play method, or the autoplay attribute.

const playingEvents = ["canplay", "canplaythrough", "play", "playing"];

Code: https://jsfiddle.net/spaozyxq/39/