HTML5 Canvas & Video實例

DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5 Canvas & Video實例

編輯：HTML5詳解

這是Html5中Canvas技術與Video技術結合的實例。效果圖：

以下代碼不能運行，只提供學習查看。若想預覽該實例請浏覽http://Html5demos.com/video-canvas
（浏覽器支持：只支持Safari, Firefox）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Dizzy</title> <style> * { margin: 0;} body { font-family: helvetica; padding: 10px; } input { width: 50px; } /*video, canvas { display: block; }*/ p { margin-top: 20px;} </style> </head> <body> <video height="360" width="480"> <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> <script src="h5utils.JS"></script> <script> 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.currentTime = 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 % 60; var m = Math.round(t / 60); return two(m) + ':' + two(s); } function two(s) { s += ""; if (s.length < 2) s = "0" + s; return s; } </script> </body> </Html>
提示：可修改後代碼再運行!

上一頁:HTML5 Canvas模擬loading實例
下一頁:HTML5 Canvas實例

HTML5詳解

html5 js實現浏覽器全屏: 項目中需要將後台浏覽器的窗口全屏，也就是我們點擊一個按鈕要實現按F11全屏的效果。在Html5中
html5關於裁剪組的使用: 本節教程介紹的裁剪組功能的使用場景是這樣子的，有時候我們只想顯示一個物體的一部分，比如我們制作了一
揭秘HTML5和CSS3: 互聯網的發展總是在不斷地催生新技術的

HTML入門知識 HTML5教程關於HTML HTML和Xhtml HTML5特效代碼 HTML5詳解

DIV CSS 佈局教程網

相關文章