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
>
JavaScript
>
Event Onplaying
Event Onplaying
π 2026-06-14 | π JavaScript
## HTML DOM onplaying Event The `onplaying` event occurs when an HTML `
` or `
` element starts playing after being paused, or when it resumes playback after buffering or a temporary delay. This event is highly useful for managing media playback states, such as hiding a loading spinner, updating custom UI controls, or tracking user engagement. --- ## Syntax You can register the `onplaying` event in three ways: ### 1. In HTML ```html
``` ### 2. In JavaScript (Property) ```javascript object.onplaying = function() { // Your code here }; ``` ### 3. In JavaScript (Event Listener) ```javascript object.addEventListener("playing", myScript); ``` *Note: The event name used in `addEventListener` is `"playing"`, not `"onplaying"`.* --- ## Technical Details | Attribute / Detail | Value | | :--- | :--- | | **Bubbles** | No | | **Cancelable** | No | | **Event Type** | `Event` | | **Supported HTML Tags** | `
`, `
` | --- ## 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 | | :--- | :--- | :--- | :--- | :--- | :--- | | `onplaying` | Yes | 9.0 | Yes | Yes | Yes | --- ## Code Examples ### Example 1: Video Element (HTML Attribute) This example triggers a JavaScript function when a video resumes playing after being paused. ```html
onplaying Event Example
Play, pause, and play the video again to trigger the event.
Your browser does not support the video tag.
``` ### Example 2: Audio Element (JavaScript Event Listener) This example uses `addEventListener()` to detect when an audio file starts playing or resumes after buffering. ```html
Audio playing Event Example
Your browser does not support the audio element.
Status: Waiting...
``` --- ## Key Considerations & Best Practices ### 1. Difference Between `onplay` and `onplaying` It is easy to confuse `onplay` with `onplaying`. Here is the key difference: * **`onplay`**: Fires as soon as the play button is clicked, or when `play()` is called programmatically, even if the media hasn't actually started rendering frames yet. * **`onplaying`**: Fires only when the media actually begins to play (i.e., when the first frame is rendered or the first sound is heard) after being paused or delayed due to buffering. ### 2. Handling Buffering States A common design pattern is to show a loading spinner when media is buffering (using the `onwaiting` event) and hide the spinner when the media resumes playing (using the `onplaying` event). ```javascript const video = document.getElementById("myVideo"); const spinner = document.getElementById("loadingSpinner"); // Show spinner when video stalls/buffers video.addEventListener("waiting", () => { spinner.style.display = "block"; }); // Hide spinner when video resumes playback video.addEventListener("playing", () => { spinner.style.display = "none"; }); ```
β Event Onprogress
Event Onplay β
π 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)