在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);

使用：

<video controls loop 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>

demo如下：