HTML DOM onplay Event

HTML DOM onplay Event

Last Updated : 15 Jun, 2023

The DOM onplay event occurs when the audio/video is played. The audio/video can be played either by the user or programmatically.

Supported Tags

Syntax:

In HTML:

<element onplay="myScript">

In JavaScript:

object.onplay = function(){myScript};

In JavaScript, using the addEventListener() method:

object.addEventListener("play", myScript);

Example: Using the addEventListener() method

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM onplay Event
    </title>
</head>

<body>
    <h1 style="color:green">
        GeeksforGeks
    </h1>
    <h2>HTML DOM onplay Event</h2>
    <video controls id="vidID" 
           width="320" height="240">
        <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190401140735/g4g2.mp4" 
                type="video/mp4">
    </video>
  
    <script>
        document.getElementById(
            "vidID").addEventListener("play", GFGfun);
        function GFGfun() {
            alert("Video play");
        }
    </script>
</body>

</html>

Output:

Supported Browsers: The browsers supported by HTML DOM onplay Event are listed below:

Google Chrome 3
Edge 12
Internet Explorer 9.0
Firefox 3.5
Apple Safari 3.1
Opera 10.5

HTML DOM onplay Event

V

Vijay Sirra

Improve

Article Tags :

Similar Reads

HTML DOM onplaying Event

The DOM onplaying event occurs when the audio/video is paused and playing after the buffer. Supported Tags: <audio> <video> Syntax: In HTML: <element onplaying="myScript">In JavaScript: object.onplaying = function(){myScript};In JavaScript, using the addEventListener() method: obje

HTML DOM oncanplay Event

The HTML DOM oncanplay event occurs when a specified audio/video is buffered enough to begin. The order of events occurs During the loading process of an audio/video: onloadstartondurationchangeonloadedmetadataonloadeddataonprogressoncanplayoncanplaythrough Supported Tags <audio> <video>

HTML DOM onload Event

The HTML DOM onload event in HTML occurs when an object has been loaded. The onload event is mostly used within the <body> tag, in order to run the script on the web page that will load all the content completely. The onload event can be used to check the user's browser type and browser versio

HTML DOM onpause Event

The DOM onpause event occurs when the audio/video is paused. The audio/video can be paused either by the user or programmatically. Supported Tags <audio> <video> Syntax: In HTML: <element onpause="myScript">In JavaScript: object.onpause = function(){myScript};In JavaScript, using t

HTML DOM onpaste Event

The HTML DOM onpaste event occurs when some content is pasted in an element. this event works on every element like in <p> element if contenteditable set is true then we can paste content in <p> element. The HTML DOM onpaste event is mostly used in input element type="text". Supported Ta

HTML | DOM onunload Event

The onunload event in HTML occurs once the page is unloaded. for example, when the page is loading and the browser window has been closed by the user or submit a form, click on a link, etc.Â This event also occurs when the page is reloaded. Supported Tags <body> Syntax:Â Â In HTML:Â Â <element

HTML DOM onblur Event

The HTML DOM onblur event occurs when an object loses focus. The onblur event is the opposite of the onfocus event. The onblur event is mostly used with form validation code (e.g. when the user leaves a form field). In HTML:<element onblur="myScript">html<!DOCTYPE html> <html lang="en

HTML DOM onabort Event

The DOM onabort event occurs in the abortion of an audio/video loading.Â This event occurs when the downloading of media data is aborted without any error. Events that occur when some disruption comes in the media loading process are:Â onemptiedonerroronstalledonsuspend Supported TagsÂ <audio>

HTML DOM onclick Event

The HTML DOM onclick event occurs when the user clicks on an element. In HTML:<element onclick="myScript">HTML<!DOCTYPE html> <html> <body> <button onclick="myFunction()">Click me</button> <p id="gfg"></p> <script> function myFunction() { documen

HTML | DOM onwheel Event

The onwheel event in HTML DOM occurs when the mouse wheel is spined over an element. This event also triggered when the user scrolls or zooms in or out an element. The onwheel event also works on the touchpad. supported Tagst All elements supported this event Syntax: In HTML: <element onwheel="Sc