Canvas- Play Video in Graphical Shapes

Written by @m_k_amin 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 . . .

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-->
<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>

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