As we know HTML5 is rich with media elements. Using HTML5 media elements we can easily embed any Audio or Video to our web pages. HTML5 supports 2 kind of video and audio formats .ogg and .mpeg. If your video is in other formats you can use any online or offline tools to convert your video. In this example here I created a Video Player using HTML5 Video element. To operate the video in this player I did implemented play, forward, rewind and pause buttons functionalities using JavaScript functions. Logic I implemented is very simple. In HTML body I have a video element with source video file (laugh-vid.mp4) path. Including this 4 buttons are there Reload, Rewind, Play & Forward. On click of these buttons I am calling the respective js functions.
Play button behaves dynamically. Once you click on this video it starts playing. While running video the same button works like a pause button. You can stop you video in-between using pause functionality. Reload button is responsible to start video from beginning. About rewind & forward buttons I have a function forwardRewind(), it accepts param as parameter. In case user click on rewind button I am passing -7 to back the track. Similarly for forward button I am passing +7. You can change this value depending your video length. To play the video here in JS function I am using .play method.
HTML5 Video Player Demo App
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>HTML5 video player with play, forward, rewind & pause buttons</title> <!--Embed the below JS Script here--> </head> <body> <video id="videoPlayer"> <source src="laugh-vid.mp4" type="video/mp4" /> </video> <!--Buttons for Video Player--> <div id="playerButtons"> <button id="btnReload" onclick="reloadVideo();">[]</button> <button id="btnRewind" onclick="forwardRewind(-7)"><<</button> <button id="btnPlay" onclick="play()">></button> <button id="btnForward" onclick="forwardRewind(7)">>></button> </div> </body> </html>
JS Functions for HTML5 Video Player
The major advantages of using HTML5 Video element is it is browser friendly and can be operate using the popular Client-side script Javascript. As we discussed above here for 4 buttons I am using few JS functions. Sharing the code below. While placing the above Code inside your HTML file use script tag.
/*Function for Play & Pause Buttons*/
function play() {
var videoPlayer = document.getElementById("videoPlayer");
var btnPlay = document.getElementById("btnPlay");
if (videoPlayer.paused) {
videoPlayer.play();
btnPlay.textContent = "||";
} else {
videoPlayer.pause();
btnPlay.textContent = ">";
}
}
/*Function to Reload video from Beginning*/
function reloadVideo() {
var videoPlayer = document.getElementById("videoPlayer");
videoPlayer.currentTime = 0;
}
/*Function to Forward & Rewind*/
function forwardRewind(param) {
var videoPlayer = document.getElementById("videoPlayer");
videoPlayer.currentTime += param;
}
HTML5 Video tag Attributes
autoplay: This is a boolean attribute. Using this you can play your video after the page loaded successfully. User don’t need to click on play button.
autobuffer: Using this attribute video will automatically begin buffering even if it’s not set to automatically play.
controls: Using controls attribute user can control video settings like playback, including decreasing or increasing volume, seeking, and pause or resume playback. If you don’t specify the controls attribute, the video won’t include the browser’s default controls.
height: This attribute helps to Set height of the video area using CSS pixels.
width: This attribute helps to Set width of the video area using CSS pixels.
loop: If you want your video need to play n number of times until or unless user toggle an event. You can set loop to “true”.
src: src stands for source. Here you need to place your video or audio link. In the place of URL you can use your local drive path or a link.
poster: Until your video start playing this attribute helps to show a static image in the player.
Using HTML5 video element you can use your youtube videos. Just place the link as a value to src attribute. As a technical tips for any resolution you are going to place your video player keep width 100%. Height varies from place to place.
