如何用HTML5制作視頻拼圖
本篇內(nèi)容介紹了“如何用HTML5制作視頻拼圖”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),石獅企業(yè)網(wǎng)站建設(shè),石獅品牌網(wǎng)站建設(shè),網(wǎng)站定制,石獅網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,石獅網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
幾天前同事給我看了一個(gè)特效，是一個(gè)拼圖游戲，不同的是，拼圖里的是動(dòng)畫(huà)。他讓我看下做個(gè)DEMO，于是就自己整了一會(huì)，也確實(shí)不難。用canvas很容易做。所以這篇博文不適合高手看。。。。就是隨便寫(xiě)來(lái)玩玩的。
效果圖：
至少我剛看到這個(gè)的時(shí)候覺(jué)得挺新穎的，所以才會(huì)想到做出來(lái)玩玩，覺(jué)得樓主out的哥們請(qǐng)輕噴
不多說(shuō)，先上DEMO：視頻拼圖 （或許要等一會(huì)才能看到效果，我是直接在w3school那里搞了個(gè)視頻鏈接過(guò)來(lái)的，拖動(dòng)什么的都做的很簡(jiǎn)單，或許還有些bug，畢竟就只是做一個(gè)DEMO玩玩而已，說(shuō)說(shuō)原理就行了），還有一點(diǎn)，直接把視頻的當(dāng)前幀畫(huà)到canvas中在移動(dòng)設(shè)備上好像還不支持。。。至少我用ipad看了一下，發(fā)現(xiàn)畫(huà)不上去，如果有知道腫么解決這問(wèn)題的大牛請(qǐng)為小弟解答一下，不甚感激
原理：每一塊拼圖就是一個(gè)canvas，同時(shí)還需要一個(gè)離屏canvas。先整一個(gè)video標(biāo)簽
代碼如下:
<p><video id="video" src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" width="600px" height="400px" controls="control" loop="loop" ></video></p>
并且把video隱藏掉，然后播放視頻的時(shí)候把每一幀都畫(huà)到離屏canvas中（離屏canvas就是隱藏了的canvas，用于保存數(shù)據(jù)），寫(xiě)法很簡(jiǎn)單：
代碼如下:
ctx.drawImage(video , 0 , 0 , vw , vh);
，直接用drawImage方法畫(huà)上去就行了。為何要先用離屏canvas呢，因?yàn)槿绻苯影衙恳粠瑪?shù)據(jù)同時(shí)畫(huà)到所有拼圖塊的canvas中，瀏覽器會(huì)瞬間崩掉。所以用一個(gè)離屏canvas作為緩沖。先把當(dāng)前幀的數(shù)據(jù)保存到canvas，然后再將canvas畫(huà)到作為拼圖塊的canvas中。將canvas畫(huà)到canvas中也很簡(jiǎn)單，也是用drawImage就可以搞定：
ctx2.drawImage(cs , -this.cols*this.w , -this.rows*this.h , vw , vh);
然后。。。。原理就這么簡(jiǎn)單，之后提醒一點(diǎn)，用requestAnimationFrame循環(huán)取幀時(shí)，要限一下速，例如下面所寫(xiě)的，我是每30毫秒取一次，推薦30~50毫秒，太低瀏覽器容易崩潰，太高的話視頻出現(xiàn)卡幀現(xiàn)象了：
代碼如下:
function animate(){ var newTime = new Date(); if(newTime - lastTime > 30){ lastTime = newTime; ctx.drawImage(video , 0 , 0 , vw , vh); canvases.forEach(function(){ var ctx2 = this.cas.getContext('2d'); ctx2.drawImage(cs , -this.cols*this.w , -this.rows*this.h , vw , vh); }); } if("requestAnimationFrame" in window){ requestAnimationFrame(animate); } else if("webkitRequestAnimationFrame" in window){ webkitRequestAnimationFrame(animate); } else if("msRequestAnimationFrame" in window){ msRequestAnimationFrame(animate); } else if("mozRequestAnimationFrame" in window){ mozRequestAnimationFrame(animate); } }
最后貼出所有代碼：
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
body{margin:0;padding:0;}
.allCanvas{
position: relative;
margin:50px auto;
width:600px;
}
.vcanvas{
position: absolute;
display: block;
border: 1px solid;
}
</style>
<title>視頻拼圖</title>
</head>
<body>
<div class="allCanvas">
<canvas id="liping" width="600" height="400" ></canvas>
</div>
<video id="video" src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" width="600px" height="400px" controls="control" loop="loop" ></video>
<script>
var video = document.getElementById("video");
var cs = document.getElementById("liping");
var ctx = cs.getContext('2d')
var rows = 3,
cols = 3,
cb = document.querySelector(".allCanvas"),
vw = 600,
vh = 400,
canvases = [];</p>
<p> function createCanvas(){
var num = rows*cols;
for(var i=0;i<cols;i++){
for(var j=0;j<rows;j++){
var canvas = new vCanvas(Math.random()*600, Math.random()*600 , vw/rows , vh/cols , j , i);
canvases.push(canvas);
}
}
}</p>
<p> var vCanvas = function(x,y,w,h,cols,rows){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.cols = cols;
this.rows = rows;
this.creat();
this.behavior();
}
vCanvas.prototype = {
creat:function(){
this.cas = document.createElement("canvas");
cb.appendChild(this.cas);
this.cas.className = "vcanvas";
this.cas.id = "vc_"+(this.cols+1)*(this.rows+1);
this.cas.style.left = this.x+"px";
this.cas.style.top = this.y+"px";
this.cas.width = this.w;
this.cas.height = this.h;
},
behavior:function(){
this.cas.onmousedown = function(e){
e = e || window.event;
var that = this;
var om = {
x:e.clientX,
y:e.clientY
}
window.onmousemove = function(e){
e = e || window.event;
var nm = {
x:e.clientX,
y:e.clientY
}
that.style.left = parseInt(that.style.left.replace("px","")) + (nm.x-om.x) + "px";
that.style.top = parseInt(that.style.top.replace("px","")) + (nm.y-om.y) + "px";
om = nm;
}
window.onmouseup = function(){
this.onmousemove = null;
}
}
}
}</p>
<p> Array.prototype.forEach = function(callback){
for(var i=0;i<this.length;i++){
callback.call(this[i]);
}
}</p>
<p> var lastTime = 0;
function initAnimate(){
lastTime = new Date();
createCanvas();
animate();
}</p>
<p> function animate(){
var newTime = new Date();
if(newTime - lastTime > 30){
lastTime = newTime;
ctx.drawImage(video , 0 , 0 , vw , vh);
canvases.forEach(function(){
var ctx2 = this.cas.getContext('2d');
ctx2.drawImage(cs , -this.cols*this.w , -this.rows*this.h , vw , vh);
});
}
if("requestAnimationFrame" in window){
requestAnimationFrame(animate);
}
else if("webkitRequestAnimationFrame" in window){
webkitRequestAnimationFrame(animate);
}
else if("msRequestAnimationFrame" in window){
msRequestAnimationFrame(animate);
}
else if("mozRequestAnimationFrame" in window){
mozRequestAnimationFrame(animate);
}
}</p>
<p> video.play();
initAnimate();
</script>
</body>
</html>“如何用HTML5制作視頻拼圖”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
當(dāng)前名稱：如何用HTML5制作視頻拼圖
文章鏈接：http://jinyejixie.com/article4/jpdcie.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站導(dǎo)航、自適應(yīng)網(wǎng)站、外貿(mào)建站、商城網(wǎng)站、品牌網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 搜索引擎優(yōu)化的學(xué)習(xí)基礎(chǔ)，它需要 2014-03-08
- seo關(guān)鍵詞優(yōu)化技術(shù)及其應(yīng)用 2014-04-29
- SEO教程 SEO應(yīng)該怎樣定制網(wǎng)站不同時(shí)期的策略定位 2016-11-09
- 你所認(rèn)為的“用戶體驗(yàn)”，真的符合搜索引擎之百度排名？ 2014-06-26
- 網(wǎng)站長(zhǎng)尾關(guān)鍵詞優(yōu)化的六大法寶 2016-11-17
- SEO關(guān)鍵詞優(yōu)化有什么較大的誤區(qū)？ 2015-03-24
- 移動(dòng)端SEO關(guān)鍵詞優(yōu)化技巧剖析 2014-04-18
- 企業(yè)網(wǎng)站營(yíng)銷推廣有哪些技巧? 2023-04-12
- 成都網(wǎng)站優(yōu)化公司-seo排名如何提高用戶體驗(yàn)？ 2014-05-31
- SEO優(yōu)化網(wǎng)站排名有哪些實(shí)用技巧? 2013-06-30
- 如何做好網(wǎng)站導(dǎo)航優(yōu)化工作? 2015-08-01
- 網(wǎng)站排名下降的原因 2015-12-22