Posts

Showing posts with the label video

custom video player with Javascript

Image
 As we know the video and audio player is the part of HTML5. With "controls" attribute, it's automatically adding the modern player interface according to different browsers.  But For leaning and custom more advanced functional player, it's good to do it with Javascript to understand how the events going on. Features: video api video.play() & video.pause() progress custom timestamp calculating Github code HTML link all the needed styles.  the range.css is from css tricks the play and stop icon are from font-awesome video tag with a poster to show the image default the controls have four parts,play button,stop button, progress bar and timestamp. CSS the screen is the audio player with border on the top the four parts in the controls inline display. the button without border for small screen setup JS select all the DOMs when click the video,toggle the status of videoo when pause and play the video,update the icon in the bar and change the progress  click event on ...