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 www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<canvas id="myCanvas" width="400" height="250"></canvas>
<video width="400" height="250" controls id="vid" style="display:none" autoplay onloadeddata="ply()">
	<source src="http://www.html5freecode.com/files/html5-video-element-sample.ogg" type="video/ogg">
	<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()	
}
</script>
<div style="text-align: left"><font face="Tahoma"><a target="_blank" href="http://www.html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div><a target='_blank' href='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.

M
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members:
advertisement 2