This is an example of the combination of canvas technology and video technology in HTML5. Effect Chart:
The following code does not run and provides only learning viewing. To preview this instance, browse Http://html5demos.com/video-canvas
(Browser support: Only Safari, Firefox)
<! DOCTYPE html> <ptml lang= "en" > <pead> <meta charset= "Utf-8"/> <title>Dizzy</title> & lt;style> * {margin:0;} body {font-family:helvetica; padding:10px; } input {width:50px;}/*video, canvas {display:block;} * * p {margin-top:20px;} </style> </pead> <body> <video height= "360" width= "the" "<source" src= "Dizzy.mp4"/> <source src= "dizzy.ogv"/> </video><canvas></canvas> <p> <input Type= "button" id= "Play" value= "Play" > <span id= "position" >00:00</span>/<span id= "duration" > </span> </p> var video = document.queryselector (' video '); var toggleplay = document.queryselector (' #play '); var position = document.queryselector (' #position '); var canvas = document.queryselector (' canvas '); var ctx = Canvas.getcontext (' 2d '); Addevent (Toggleplay, ' click ', Function () {video.playbackrate = 0.5; if (video.paused) {if (video.ended) Video.currentti me = 0; Video. Play (); This.value = "Pause"; else {video.pause (); this.value = "Play";}}); Addevent (video, ' Timeupdate ', function () {position.innerhtml = Astime (this.currenttime);//Ctx.restore (); Ctx.drawimage (video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height); }); Addevent (video, ' Ended ', function () {Toggleplay.value = "play";}); Addevent (video, ' Canplay ', function () {video.muted = true; Document.queryselector (' #duration '). InnerHTML = Astime (This . Duration); Startcanvas (); }); function Startcanvas () {canvas.setattribute (' height ', Math.floor (video.height)); Canvas.setattribute (' Width ', Math.floor (video.width)); Ctx.translate (CANVAS.WIDTH/2, CANVAS.HEIGHT/2); Ctx.scale (-1, 1); Ctx.translate (-CANVAS.WIDTH/2,-CANVAS.HEIGHT/2); Ctx.drawimage (video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height); var mirror = canvas.height * 0.6; var grad = ctx.createlineargradient (0, 0, 0, Mirror); Grad.addcolorstop (0, ' rgba (0, 0, 0, 0.5) '); Grad.adDcolorstop (1, ' Rgba (0, 0, 0, 1) '); Ctx.fillstyle = Grad; Ctx.rect (0, 0, canvas.width, mirror); Ctx.fill (); Ctx.save (); function Astime (t) {t = Math.Round (t); var s = t% var m = Math.Round (T/60); return two (M) + ': ' + two (s);} func tion two (s) {s + = ""; if (S.length < 2) s = "0" + s; return s; } </body> </ptml>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
