HTMLMediaElement: Play Event - Web APIs | MDN

• Skip to main content
• Skip to search

HTMLMediaElement: play event Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

• Learn more
• See full compatibility
• Report feedback

The play event is fired when the paused property is changed from true to false, as a result of the play method, or the autoplay attribute.

This event is not cancelable and does not bubble.

In this article

• Syntax
• Event type
• Examples
• Specifications
• Browser compatibility
• Related Events
• See also

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

jsaddEventListener("play", (event) => { }) onplay = (event) => { }

Event type

A generic Event.

Examples

These examples add an event listener for the HTMLMediaElement's play event, then post a message when that event handler has reacted to the event firing.

Using addEventListener():

jsconst video = document.querySelector("video"); video.addEventListener("play", (event) => { console.log( "The Boolean paused property is now 'false'. Either the play() method was called or the autoplay attribute was toggled.", ); });

Using the onplay event handler property:

jsconst video = document.querySelector("video"); video.onplay = (event) => { console.log( "The Boolean paused property is now 'false'. Either the play() method was called or the autoplay attribute was toggled.", ); };

Specifications

Specification
HTML# event-media-play
HTML# handler-onplay

Browser compatibility

Related Events

• The HTMLMediaElement playing event
• The HTMLMediaElement waiting event
• The HTMLMediaElement seeking event
• The HTMLMediaElement seeked event
• The HTMLMediaElement ended event
• The HTMLMediaElement loadedmetadata event
• The HTMLMediaElement loadeddata event
• The HTMLMediaElement canplay event
• The HTMLMediaElement canplaythrough event
• The HTMLMediaElement durationchange event
• The HTMLMediaElement timeupdate event
• The HTMLMediaElement pause event
• The HTMLMediaElement ratechange event
• The HTMLMediaElement volumechange event
• The HTMLMediaElement suspend event
• The HTMLMediaElement emptied event
• The HTMLMediaElement stalled event

See also

• HTMLAudioElement
• HTMLVideoElement
• <audio>
• <video>

Help improve MDN

Was this page helpful to you? Yes No Learn how to contribute

This page was last modified on ⁨May 2, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content Filter sidebar

1. HTMLMediaElement
2. Instance properties
   1. audioTracks
   2. autoplay
   3. buffered
   4. controller Non-standard Deprecated
   5. controls
   6. controlsList
   7. crossOrigin
   8. currentSrc
   9. currentTime
   10. defaultMuted
   11. defaultPlaybackRate
   12. disableRemotePlayback
   13. duration
   14. ended
   15. error
   16. loop
   17. mediaGroup Non-standard Deprecated
   18. mediaKeys
   19. muted
   20. networkState
   21. paused
   22. playbackRate
   23. played
   24. preload
   25. preservesPitch
   26. readyState
   27. remote
   28. seekable
   29. seeking
   30. sinkId
   31. src
   32. srcObject
   33. textTracks
   34. videoTracks
   35. volume
3. Instance methods
   1. addTextTrack()
   2. canPlayType()
   3. captureStream()
   4. fastSeek()
   5. load()
   6. pause()
   7. play()
   8. seekToNextFrame() Non-standard Deprecated
   9. setMediaKeys()
   10. setSinkId()
4. Events
   1. abort
   2. canplay
   3. canplaythrough
   4. durationchange
   5. emptied
   6. encrypted
   7. ended
   8. error
   9. loadeddata
   10. loadedmetadata
   11. loadstart
   12. pause
   13. play
   14. playing
   15. progress
   16. ratechange
   17. seeked
   18. seeking
   19. stalled
   20. suspend
   21. timeupdate
   22. volumechange
   23. waiting
   24. waitingforkey
5. Inheritance
   1. HTMLElement
   2. Element
   3. Node
   4. EventTarget