关于如何在微信里面让video不全屏播放。

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

最近做一个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.

原文地址: http://itakeo.com/blog/2016/07/07/videoinline/?none=123