Video- Design a Video Player for Your Site

Written by @m_k_amin 8 June 2013

HTML5 Video Element has different capabilities which let you have more control on the player. These features are available as events, functions and attributes. To make them work a combination of HTML5 and JavaScript must be used. The following example is a custom video player showing how desired buttons can control the HTML5 Video player. As you can see, there exists buttons for playing and pausing, volume up and down, and changing the playback rate (speed).

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.html5freecode.com coded by: Kerixa Inc. -->

<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<div style="border-style: solid; border-width: 1px; padding: 1px 4px; width: 350px; height: 247px; color: #000000; text-align: center; background-color: #B8BDC5;">
	<span style="color: #262AD5"><strong>My Video Player<br></strong></span>
	<br style="font-size: 5pt">
<video autoplay width="320" height="150" id="myvid" controls preload="auto"  onloadeddata="ply()">
	<source src="http://www.html5freecode.com/assets/files/html5-video-element-sample.mp4" type="video/mp4">
	<source src="http://www.html5freecode.com/assets/files/html5-video-element-sample.ogg" type="video/ogg">
</video><br>

	<table style="width: 100%">
		<tr>
			<td style="text-align: center">
			<br style="font-size: 5pt">

<input name="btnPlay" type="button" value="Playing" id="bPly" onclick="OnOff('bPly')" style="border: thin #6666FF inset; background-color:#B9F566; width: 69px; height: 25px;" >
<input name="btnMute" type="button" value="Mute" id="bMute" onclick="OnOff('bMute')" style="border: thin blue outset; background-color:#DBDED7; width: 51px; height: 25px;" >
<input name="btnLoop" type="button" value="Loop" id="bLoop" onclick="OnOff('bLoop')" style="border: thin blue outset; background-color:#DBDED7; width: 51px; height: 25px;" ></td>
		</tr>
		<tr>
			<td style="text-align: center">
<input name="btnVolu" type="button" value="Vol +" onclick="Vol('up')" style="border: thin #800000 outset; background-color:#CCCCFF; width: 41px; height: 25px;" >
<input name="btnVold" type="button" value="Vol -" onclick="Vol('down')" style="border: thin #800000 outset; background-color:#CCCCFF; width: 41px; height: 25px;">
<input name="btnRateu" type="button" value="Rate +" onclick="Rate('up')" style="border: thin #008080 outset; background-color:#FFCF9F; width: 50px; height: 25px;">
<input name="btnRated" type="button" value="Rate -" onclick="Rate('down')" style="border: thin #008080 outset; background-color:#FFCF9F; width: 50px; height: 25px;" ></td>
		</tr>
	</table>
</div>
<script>
var vid= document.getElementById("myvid")
function OnOff(id){
	var btn= document.getElementById(id)
	if (btn.style.borderStyle=="inset"){
		btn.style.borderStyle= "outset"
		btn.style.backgroundColor= "#DBDED7"
		btn.style.borderColor= "blue"
		switch(id){
			case 'bPly':
				btn.value= "Paused"
				vid.pause()
				break
			case 'bMute':
				vid.muted= false
				break
			case 'bLoop':
				vid.loop= false
				break			
		}
	}else{
		btn.style.borderStyle= "inset"
		btn.style.backgroundColor= "#B9F566"
		btn.style.borderColor= "#6666FF"
		switch(id){
			case 'bPly':
				btn.value= "Playing"
				vid.play()
				break
			case 'bMute':
				vid.muted= true
				break
			case 'bLoop':
				vid.loop= true
				break			
		}
	}
}
function Vol(str){
	var vl= Math.round(vid.volume*10)/10
	if (str=="up" && vl<1)
		vid.volume += 0.2
		
	if (str=="down" && vl>0)
		vid.volume -= 0.2
}

function Rate(str){
	var rt= Math.round(vid.playbackRate*10)/10
	if (str=="up")
		vid.playbackRate += 0.1
	
	if (str=="down" && rt> 0.5)
		vid.playbackRate -= 0.1
}

function ply(){
	var vid= document.getElementById('myvid')
	vid.play()	
}

</script>
<div style="text-align: center; width: 354px; height: 16px;">
	<br style="font-size: 5pt"><font face="Tahoma">
	<span style="font-size: 8pt; text-decoration: none">
	<a target="_blank" href="http://www.html5freecode.com">HTML5 Free Code</a></span></font></div>                                          
                                            <a target='_blank' href='https://www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>

Example:

About @m_k_amin

This user is pending a biography.

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300