It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Please check your email for instructions to activate your account.
Written by 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).
<!-- 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>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!