VIDEO JAVASCRIPT

The label <video> has attributes and methods that we can access through JAVASCRIPT

For example, to the following definition video:

<video id="videoName" width="320">     <source src="videoFileName.mp4" type="video/mp4" />     <source src="videoFileName.ogg" type="video/ogg" />     Your browser does not support HTML5 video. </video>

We can access attributes and methods using JAVASCRIPT For object video in JAVASCRIPT use this code:

<script type="text/javascript">   var videoName =document.getElementById("videoName"); </script>

METHODS VIDEO

To play the video

videoName.play();

To pause the video playback

videoName.pause();

Other methods are: load() and canPlayType();

VIDEO ATTRIBUTES

You can also access the attributes of a video using JAVASCRIPT:

To access the attribute "width" and "height":

videoName.width = 420; videoName.height = 320;

Other video attributes are:

currentSrc, currentTime, videoWidth, videoHeight, duration, ended, error, paused, muted, seeking and volume

VIDEO EVENTS

There are also events that can warn you if a video, for example, is charging, or while standing or have completed, and so on.

Events for the object "video" are:

play, pause, progress, error, timeupdate, ended, abort, empty, emptied, waiting and loadedmetadata

Sample web page with a video and buttons for certain functions.

<!DOCTYPE html> <html> <body> <div style="text-align:center">   <video id="videoName" width="420">     <source src="videoName.mp4" type="video/mp4" />     <source src="videoName.ogg" type="video/ogg" />     Your browser does not support HTML5 video.   </video>   <button onclick="playpause()">Play or Pause</button>   <button onclick="big()">Big</button>   <button onclick="small()">Small</button> </div> <script type="text/javascript">   var videoName=document.getElementById("videoName ");   function playpause()   {     if (videoName.paused)     {       videoName.play();     }     else     {       videoName.pause();     }   }   function big()   {      videoName.width=560;   }   function small()   {     videoName.width=320;   } </script> </body> </html>