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

来源：互联网发布：iroha 知乎编辑：程序博客网时间：2024/06/05 00:31

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

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

0 0