JavaScript Custom Media Player

You can manually control the playback of media files using the play () and pause () methods of the <audio> and <video> Elements. Combination makes
With properties, events, and both, it's easy to create a custom media player, as shown in the following example.

1 <Divclass= "mediaplayer">2     <Divclass= "video">3         <VideoID= "player"src= "movie.mov"Poster= "mymovie.jpg"4 width= "+"Height= "$">5 Video player not available.6         </Video>7     </Div>8     <Divclass= "controls">9         <inputtype= "button"value= "Play"ID= "video-btn">Ten         <spanID= "curtime">0</span>/<spanID= "duration">0</span> one     </Div> a </Div>

The above basic HTML plus some JavaScript can become a simple video player. Here's the JavaScript
Code.

1Window.onload=function(){2     varPlayer = document.getElementById ("player"),3OBTN = document.getElementById ("video-btn"),4Curtime = document.getElementById ("curtime"),5Duration = document.getElementById ("duration");6     //Update Play Time7duration.innerhtml =player.duration;8     9Obtn.onclick =function(){Ten         if(player.paused) { one Player.play (); aObtn.value = "Pause"; -         }  -         Else { the Player.pause (); -Obtn.value = "Play"; -         } -     } +     //timed update Current time -SetInterval (function(){ +curtime.innerhtml =player.currenttime; a}, 250); at}

The above JavaScript code adds an event handler to the button, which allows the video to be played when paused and temporarily
Stop. The <video> Element's Load event handler sets the playback time to be displayed after the video is Loaded. finally, you set up a
Timer to update the currently displayed Time. You can further expand this video player, listen for more events, and take advantage of more properties.
The same code can also be used for <audio> elements to create a custom audio Player.

JavaScript Custom Media Player