Html Codes: Canvas- Play Video in Graphical Shapes

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

If you don't know how to use this code or need more information Click here!


	You can leave comments once you sign in/up.

HTML5 Best Codes

Html Codes: Canvas- Play Video in Graphical Shapes

You can leave comments once you sign in/up.

Review

Links