最新解决方法，可点击这里查看。

最近做一个HTML5的活动页面，需要在页面内播放视频，并有交互动作。之前，可以在video标签内写上 webkit-playsinline 属性就可以不全屏播放，但是现在在部分Android手机和小屏的iPhone上已经失效了，看了下优酷和土豆，在Android上播放都默认全屏打开。据说在腾讯自家域名以及在白名单内的网站（比如前段时间很火的吴亦凡HTML5以及最近的穿越故宫来看你），视频可以不全屏播放。

这里有个腾讯X5专区的提问：关于微信内video标签播放视频自动全屏的提问

如果在页面内放一个隐藏的video，然后video播放再通过canvas渲染出来，看起来的确可以，但是在部分手机上video只要一播放，还是会全屏打开，而且在Android设备，video播放会置顶与任何标签之上， 所以这个方法依然不行。

方案一、通过jsmpg插件来解码video，但是这个插件好像只能解码mpeg的格式视频，而且还有一些文件编码限制，具体点击这里查看github。通过测试，在Android和ios设备均可播放，而且jsmpg提供了几个实用的Api， 不过通过js去解码视频，可能会很消耗性能。

var canvas = document.getElementById('canvas');
var player = new jsmpeg('fox.mpg', {
    canvas: canvas,
    loop : true
});
01.
02.
03.
04.
05.

点击播放

方案二、将视频切出一张张的图片帧，然后通过canvas去渲染，不过这个方法，只适合简短的视频，超过几分钟，加载图片的数量将是可怕的，但是兼容性依然不错的，在Android和ios设备均可播放。并且可做交互。

点击播放

var imgArr = [],source = {},now2 = 0,imgNum = 0,timer=null;
var canvas2 = document.querySelector('#canvas2');
var videoBox = document.querySelector('.videoBox');
var view = {w : videoBox.offsetWidth,h : videoBox.offsetHeight}
canvas2.width = view.w;
canvas2.height = view.h;
var ctx = canvas2.getContext("2d");
ctx.clearRect(0,0,canvas2.width,canvas2.height);

//添加图片进数组
function pushImgArr (num) {
    document.querySelector('#loadWrap2').style.display = 'block';
    imgArr = [];
    for( var i = 0;i < num;i++ ) {
        imgArr.push('videoImg/'+i+'.jpg');
    };
    imgLoad ();
};

//图片加载
function imgLoad(){
    source['src'+now2] = new Image();
    source['src'+now2].src = imgArr[now2];
    source['src'+now2].onload = function(){
        now2 ++ ;
        if( now2 > imgArr.length-1 ){
            //加载成功
            document.querySelector('#loadWrap2').style.display = 'none';
            //执行canvas渲染
            movieInit()
        }else{
            //递归加载
            imgLoad();
        };
    };
}; 

//canvas图片渲染
function movieInit (){
    clearInterval(timer);
    timer = setInterval(function(){
        if( imgNum == imgArr.length ){
            clearInterval(timer);
        }else{
            ctx.clearRect(0,0,canvas2.width,canvas2.height);
            ctx.drawImage(source['src'+imgNum],0,0,view.w,view.h);
            imgNum++;
        };
    },60);
};

//按钮点击开始播放
document.querySelector('.playBtn2').onclick = function(){
    pushImgArr(77);
};
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.