HTML - attributes - one...

revision:


Content

"onemptied" attribute : when playlist is empty "onended" attribute : when audio/video has reached end "onerror" attribute : error during loading of media file


"onemptied" attribute : when playlist is empty

top

The attribute fires when the current playlist is empty. The attribute is used to trigger an event when the media encounters some fatal error, or the media file becomes unavailable, or the media playlist is empty.

The "onemptied attribute" is part of the event attributes and can be used on the following elements:<audio> and <video>

syntax

<element onemptied="scriptFunction()"></element >

This attribute contains a single value script, which works when media is empty by using the onemptied attribute.

some examples

example

codes:

                    <video width="320" height="240" controls onemptied="onEmptied()">
                        <source src="../pics/Wuzhen-20-10_02.mp4" type="video/mp4">
                    </video>    
                    <script>
                        function onEmptied() {
                            alert("the video playlist is empty!");
                        }
                    </script>
                

"onended" attribute : when audio/video has reached end

top

This event occurs when the audio/video has reached the end. It is useful for messages like "thanks for listening", "thanks for watching", etc.

The "onended attribute" is part of the event attributes and can be used on the following elements:<audio> and <video>

syntax

<element onended="script"></element >

script: the script to be run on onended

some examples

example

Play the audio file:

codes:

                    <audio style="margin-left:3vw;" id="myAudio" controls onended="endedFunc()">                                         
                        <source src="../pics/horse.wav" type="audio/wav">
                        Your browser does not support the audio element.
                    </audio>
                    <p>  class="spec">Play the audio file:</p>
                    <script>
                        function endedFunc() {
                        alert("Thank you for listening");
                        }
                    </script> 
                

example

Play the video:

codes:

                    <video style="margin-left:3vw;" id="myVideo" width="320" height="176" controls onended="videoEnded()">
                        <source src="../pics/Wuzhen-20-10_02.mp4" type="video/mp4">
                        Your browser does not support HTML5 video.
                    </video>
                    <script>
                        function videoEnded() {
                        alert("Thank you for watching");
                        }
                    </script> 
                

"onerror" attribute : error during loading of media file

top

This attribute fires when an error occurred during the loading of a media file.
The "onerror attribute" is part of the event attributes and can be used on the following elements:<audio>, <body>, <embed>, <img>, <link>, <object>, <script>, <video>.

syntax

<element onerror="script"></element >

value: a function which serves as the event handler for the error event. When an error occurs, the specified function will be called. If null, no error handler is in effect.

some examples

example

A function is triggered if an error occurs when loading the image. The function shows an alert box with a text. In this example we refer to an image that does not exist, therefore the onerror event occurs.

codes:

                    <img style="margin-left:3vw;" src="../pics/image.gif" onerror="errorFunction()">
                    <script>
                        function errorFunction() {
                            document.getElementById("demo_error").innerHTML = "The image could not be loaded!!";
                        }
                    </script>
                

example

HTML codes:

                    <img style="margin-left:3vw;"  src="../pics/image.gif" onerror=someFun()>
                    <P class="spec" id="fun" style="font-size: 2vw; color:red;"></P>
                    <script>
                        function someFun() {
                            document.getElementById('fun').innerHTML = 'Error!!';
                        }
                    </script>