JS工具庫封裝：Video轉換成Canvas

在PC端，IE9+瀏覽器對原生視頻的支持仍是很不錯的，然而一到了移動端就會各類兼容性的坑爹問題。

在移動端，各大瀏覽器廠商對視頻會植入許多他們自定義的交互方式（如默認全屏播放、視頻不能初始化播放、窗口置頂等等），更坑爹的是這些被植入的交互還沒法去掉。移動端的視頻行內自動播放看起來確實很棘手。

目前主流有兩種方法處理移動端的視頻播放問題：

一種是改設計和說服需求方，即便視頻不能自動播放或者置頂也不影響頁面展現的主要體驗；

另外一種即是使用canvas來替代video。

看起來，canvas像是完美的，沒有瀏覽器廠商任性的植入屬性，任由開發者打扮。可是經咱們測試後，其實有些低端的Android手機可能會出現卡頓和動畫變糊的狀況。若是不考慮一些低端手機，仍是很值得實踐的。

video轉canvas的主要原理，是將視頻播放的每一幀都繪製到一個canvas中，這樣這個canvas連起來看便像是視頻動畫了。

爲了方便平常開發使用，特地稍微封裝了一下video轉canvas的工具庫，具體代碼以下：

/* * video視頻轉成canvas（兼容至IE8+） * Author: Zijor Created On: 2017-06-25 * * 使用方法： * var videoCanvas = new VideoToCanvas(videoDom); * * 對象的屬性： * 暫無。 * * 對象的方法： * play 播放視頻 * pause 暫停視頻 * playPause 播放或暫停視頻 * change(src) 切換視頻。參數src爲切換的視頻地址 */ var VideoToCanvas = (function(window, document) { function VideoToCanvas(videoElement) { if(!videoElement) {return;} 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() { ctx.drawImage(newVideo, 0, 0, canvas.width, canvas.height); timer = requestAnimationFrame(drawCanvas); } function stopDrawing() { cancelAnimationFrame(timer); } newVideo.addEventListener('play', function() { drawCanvas(); },false); newVideo.addEventListener('pause', stopDrawing, false); newVideo.addEventListener('ended', stopDrawing, false); videoElement.parentNode.replaceChild(canvas, video); this.play = function() { newVideo.play(); }; this.pause = function() { newVideo.pause(); }; this.playPause = function() { if(newVideo.paused) { this.play(); } else { this.pause(); } }; this.change = function(src) { if(!src) {return;} newVideo.src = src; }; this.drawFrame = drawCanvas; } return VideoToCanvas; })(window, document);

1調用：

<video id="video" controls loop width='300' autoplay webkit-playsinline="true" src='http://www.w3school.com.cn/example/html5/mov_bbb.mp4'></video> <script> var video = document.getElementById('video'); new VideoToCanvas(video); </script>