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 29 June 2013
Playing video is a feature which enhance websites qualities a lot. As we mentioned before, HTML5 has its own video player but its shapes may not be appropriate for your website. HTML5 Canvas allows you to play a video inside a custom shape. In other words, just design a shape and then put the video inside it. This kind of video playing can also be used for shrinking or magnifying the video. The following example shows how HTML5 Canvas gets combined with HTML5 video element. Wait a moment until the video is loaded . . .
<!-- this script is provided by https://www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<button id="unmute">Unmute</button>
<canvas id="myCanvas" width="400" height="250"></canvas>
<video width="400" height="250" controls id="vid" style="display:none" muted loop autoplay onloadeddata="ply()">
<source src="http://www.html5freecode.com/files/html5-video-element-sample.mp4" type="video/mp4">
</video>
<script>
var cnv = document.getElementById('myCanvas')
var ctx = cnv.getContext('2d')
var vid= document.getElementById('vid')
var deg = Math.PI/180
ctx.font= "22pt serif"
ctx.fillText('Loading...', 50, 110)
window.addEventListener('load', loaded, false)
setInterval(loaded, 33)
function loaded(){
ctx.strokeStyle= "red"
ctx.beginPath()
ctx.moveTo(40, 20)
ctx.lineTo(150, 20)
ctx.quadraticCurveTo(180, 20, 180, 40)
ctx.lineTo(180, 180)
ctx.quadraticCurveTo(160, 180, 150, 200)
ctx.lineTo(40, 200)
ctx.quadraticCurveTo(30, 180, 10, 180)
ctx.lineTo(10, 40)
ctx.quadraticCurveTo(10, 20, 40, 20)
ctx.closePath
ctx.lineWidth= 4
ctx.fillStyle= "lightgreen"
ctx.strokeStyle= "darkgreen"
ctx.stroke()
ctx.save()
ctx.clip()
ctx.drawImage(vid, 10, 20, 170, 180)
ctx.restore()
ctx.beginPath()
ctx.arc(95, 110, 30, 0*deg, 360*deg)
ctx.moveTo(90, 80)
ctx.lineTo(290, 30)
ctx.moveTo(90, 140)
ctx.lineTo(290, 190)
ctx.moveTo(380, 110)
ctx.arc(300, 110, 80, 0*deg, 360*deg)
ctx.lineWidth= 1
ctx.strokeStyle= "pink"
ctx.stroke()
ctx.save()
ctx.clip()
ctx.drawImage(cnv, 67, 82, 56, 56, 220, 30, 160, 160)
ctx.restore()
}
function playVid(){
ctx.drawImage(vid, 10, 20, 170, 180)
ctx.drawImage(cnv, 67, 82, 56, 56, 220, 30, 160, 160)
}
function ply(){
var vid= document.getElementById('vid')
vid.play()
}
let unmute = document.getElementById("unmute");
//Add an event listner to the start button
unmute.addEventListener("click", (e) => {
console.log(e.currentTarget.innerHTML);
if(vid.muted == true){
vid.muted = false;
e.currentTarget.innerHTML = "Mute";
}else{
vid.muted = true;
e.currentTarget.innerHTML = "Unmute";
}
});
</script>
<div style="text-align: left"><font face="Tahoma"><a target="_blank" href="https://html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></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!