最新解决方法,可点击这里查看。
最近做一个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); };原文地址: http://itakeo.com/blog/2016/07/07/videoinline/?none=12301.
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.