YouTip
Home
JavaScript
PHP
Python3
HTML
C#
Python
Java
PyTorch
Linux
C
jQuery
CSS
XML
jQuery UI
Bootstrap
C++
Angular
HTML DOM
Redis
Web Building
Home
>
HTML
>
Av Event Playing
Av Event Playing
π 2026-06-14 | π HTML
# HTML Audio/Video DOM: playing Event The `playing` event is a crucial lifecycle event in HTML5 media elements (`
` and `
`). It provides developers with a reliable hook to know exactly when media playback has actually started or resumed after being paused, delayed, or buffered. --- ## Introduction The `playing` event fires when the audio/video has started playing after being paused, or when it resumes playback after being temporarily stopped due to a lack of media data (buffering). ### `play` vs. `playing` It is important to understand the distinction between the `play` event and the `playing` event: * **`play`**: Fires as soon as the play button is clicked or the `play()` method is called. At this point, the media might not actually be rendering frames or emitting sound yet because it is still loading or buffering. * **`playing`**: Fires only when the playback **actually begins** (i.e., the first frame is rendered or sound starts playing) after a pause or buffering delay. --- ## Browser Support The numbers in the table specify the first browser version that fully supports this event. | Event | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **playing** | Yes | 9.0 | Yes | Yes | Yes | --- ## Syntax You can register the `playing` event in three different ways: ### 1. In HTML ```html
``` ### 2. In JavaScript (using the `onplaying` event handler) ```javascript const mediaElement = document.getElementById("myMedia"); mediaElement.onplaying = function() { // Your custom script here }; ``` ### 3. In JavaScript (using `addEventListener()`) ```javascript const mediaElement = document.getElementById("myMedia"); mediaElement.addEventListener("playing", myFunction); function myFunction() { // Your custom script here } ``` > **Note:** Internet Explorer 8 and earlier versions do not support the `addEventListener()` method. --- ## Technical Details | Property/Feature | Description | | :--- | :--- | | **Supported HTML Tags** | `
` and `
` | | **Supported JavaScript Objects** | Audio, Video | | **Bubbles** | No | | **Cancelable** | No | --- ## Code Examples ### Example 1: Video Playback Notification This example demonstrates how to trigger an alert or execute code when a video actually starts playing. ```html
Video playing Event Example
Your browser does not support the video tag.
Status: Paused/Stopped
``` ### Example 2: Audio Playback Notification This example shows how to detect when an audio track begins playing after buffering or being paused. ```html
Audio playing Event Example
Your browser does not support the audio element.
``` --- ## Developer Considerations 1. **Handling Buffering States**: The `playing` event is highly useful for managing loading spinners or custom UI overlays. You can display a loading spinner when the `waiting` event fires (indicating the media has stalled to buffer) and hide the spinner when the `playing` event fires (indicating playback has resumed). 2. **Analytics Tracking**: If you are tracking user engagement, use the `playing` event rather than the `play` event to measure actual watch time. This ensures you do not count time spent waiting for the video to buffer as active viewing time.
β Av Event Ratechange
Av Event Play β
π Categories
β‘ JavaScript
(1589)
π PHP
(872)
π Python3
(810)
π HTML
(691)
βοΈ C#
(650)
π Python
(594)
β Java
(552)
βοΈ PyTorch
(534)
π§ Linux
(472)
βοΈ C
(432)
π¦ jQuery
(406)
π¨ CSS
(377)
π XML
(259)
π¦ jQuery UI
(231)
π― Bootstrap
(220)
βοΈ C++
(215)
π °οΈ Angular
(205)
π HTML DOM
(201)
π΄ Redis
(188)
π Web Building
(142)
π Vue.js
(141)
π R
(131)
πΌ Pandas
(124)
ποΈ SQL
(105)
βοΈ Docker
(86)
βοΈ TypeScript
(73)
βοΈ Highcharts
(70)
π AI Agent
(70)
βοΈ React
(68)
π Node.js
(65)
βοΈ Machine Learning
(60)
π Git
(59)
π΅ Go
(58)
π Markdown
(58)
π’ NumPy
(55)
π§ͺ Flask
(54)
βοΈ Scala
(53)
ποΈ SQLite
(52)
π JSTL
(52)
βοΈ VS Code
(51)
π MongoDB
(49)
π Perl
(48)
π Ruby
(47)
π Matplotlib
(47)
βοΈ Uncategorized
(46)
π Swift
(46)
ποΈ PostgreSQL
(46)
βοΈ Data Structures
(46)
π Playwright
(46)
π iOS
(45)
ποΈ MySQL
(44)
βοΈ LangChain
(43)
π FastAPI
(40)
βοΈ Ionic
(38)
π Design Patterns
(37)
βοΈ Eclipse
(37)
π¨ CSS3
(34)
π Lua
(34)
βοΈ Codex
(34)
πΈ Django
(32)
βοΈ OpenCV
(32)
π Rust
(31)
π JSP
(31)
βοΈ Claude Code
(31)
π Pillow
(30)
βοΈ OpenCode
(28)
π AI Skills
(27)
π Flutter
(26)
π Maven
(26)
π¨ Tailwind CSS
(25)
π§ TensorFlow
(25)
π Servlet
(24)
π Dart
(23)
π Assembly
(23)
βοΈ Memcached
(22)
βοΈ SVG
(22)
βοΈ Electron
(22)
π NLP
(22)
π Regex
(21)
π Android
(20)
π£ Kotlin
(19)
π Julia
(19)
π SOAP
(17)
π Selenium
(17)
π PowerShell
(17)
π Sass
(16)
π HTTP
(16)
π Zig
(15)
π AI
(15)
π AJAX
(14)
π Swagger
(14)
βοΈ Scikit-learn
(13)
βοΈ ECharts
(13)
βοΈ Chart.js
(13)
βοΈ Cursor
(13)
βοΈ SciPy
(12)
π RDF
(12)
π Ollama
(12)
π Next.js
(12)
π Plotly Dash
(12)
π JSON
(11)
π RESTful API
(11)
π WSDL
(9)
βοΈ CMake
(8)
π Firebug
(7)
π Nginx
(6)
βΈοΈ Kubernetes
(6)
π Jupyter
(6)
π LaTeX
(4)
π UniApp
(4)
ποΈ SQL Server
(1)