另一種便是使用canvas來替代video。
看起來,canvas像是完美的,沒有瀏覽器廠商任性的植入屬性,任由開發者打扮。但是經我們測試後,其實有些低端的android手機可能會出現卡頓和動畫變糊的情況。如果不考慮一些低端手機,還是很值得實踐的。
為了方便日常開發使用,特意稍微封裝了一下video轉canvas的工具庫,具體**如下:
/*
* author: zijor created on: 2017-06-25
* * 使用方法:
* var videocanvas = new videotocanvas(videodom);
* * 物件的屬性:
* 暫無。
* * 物件的方法:
*/var videotocanvas = (function
(window, document)
var canvas = document.createelement('canvas');
canvas.width = videoelement.offsetwidth;
canvas.height = videoelement.offsetheight;
ctx = canvas.getcontext('2d');
var newvideo = videoelement.clonenode(false);
var timer = null;
var requestanimationframe = window.requestanimationframe || window.mozrequestanimationframe ||
window.webkitrequestanimationframe || window.msrequestanimationframe;
var cancelanimationframe = window.cancelanimationframe || window.mozcancelanimationframe;
function
drawcanvas
() function
stopdrawing
() newvideo.addeventlistener('play', function
() ,false);
newvideo.addeventlistener('pause', stopdrawing, false);
newvideo.addeventlistener('ended', stopdrawing, false);
videoelement.parentnode.replacechild(canvas, video);
this.play = function
() ;
this.pause = function
() ;
this.playpause = function
() else
};this.change = function
(src)
newvideo.src = src;
};this.drawframe = drawcanvas;
} return videotocanvas;
})(window, document);
呼叫:
id="video"
controls
loop
width='300'
autoplay
webkit-playsinline="true"
src=''>
video>
var video = document.getelementbyid('video');
new videotocanvas(video);
script>
js 漢字轉換成拼音
npm install js pinyin main.js 引入 import pinyin from js pinyin 使用元件內 let pinyin require js pinyin pinyin.setoptions console.log pinyin.getfullchars 管理員...
js將數字轉換成中文
var change strrev function return ary.join 倒轉字串。pri ary function 關於0的處理與判斷。if ary i 0 如果不被4整除,那麼都執行這段判斷 如果它的下一位數字 針對當前字串來說是上乙個字元,因為之前執行了反轉 也是0,那麼跳過,否則...
js將數字轉換成中文
var change strrev function return ary.join 倒轉字串。pri ary function 關於0的處理與判斷。if ary i 0 如果不被4整除,那麼都執行這段判斷 如果它的下一位數字 針對當前字串來說是上乙個字元,因為之前執行了反轉 也是0,那麼跳過,否則...