最近公司做一个视频活动的HTML5页面，页面并不复杂，但是要求视频播放的时候不全屏。在网上看到好论坛类似的基本问题，以前有申请白名单的，在白名单的视频链接或者腾讯旗下的视频链接是原生播放，否则安卓会被劫持成腾讯家的播放器播放并且默认全屏，目前通过白名单的方法是解决不了的。还好终于找到了解决办法，下面好好整理一下。在video标签中加属性
<video id="videos" playsinline="true" poster="img/1.jpg" webkit-playsinline="true" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"><source src="img/output.mp4" type="video/mp4" />
</video>也就是所谓的开启同层播放器
x5-video-player-type="h5" /*让video开启同层H5播放器*/
x5-video-player-fullscreen="true" /*设置为 true 是防止横屏*/
playsinline="true" 和 webkit-playsinline="true" /*这个属性是ios中设置可以让视频在小窗内播放*/上面的方法试了，在ios中可以不全屏，但是在安卓的微信中打开依然是全屏的。。。
视频解码
视频解码最好用FFmpeg转码，可以转mp4、mpeg、mkv....,还可以提取视频中的音乐。
mp4转MP4
ffmpeg -i D:\Projects\cat.mp4 -vcodec libx264 -pass 1 -coder 0 -bf 0 -flags -loop -wpredp 0 out.mp4mkv转MP4
ffmpeg -i D:\Projects\cat.mkv -c:v copy -c:a copy cat.mp4提取音乐
ffmpeg -i D:\Projects\cat.mp4 -f mp3 -vn apple.mp3mp4转mpeg,视频的宽度必须是2的倍数
ffmpeg -i D:\Projects\cat.mp4 -f mpeg1video -vf "crop=iw-mod(iw\,2):ih-mod(ih\,2)" -b 0 cat.mpg其他使用方法可以到官网中查找，这里就不多介绍了。
1、Broadway
Broadway是从其他语言翻译而成，这个解码器支持 mp4 后缀的视频文件，有时候即使是手机拍摄的mp4格式的视频也没什么用，最好还是用ffmpeg再转一下格式。视频的地址最好是在线的地址，本地测试的时候本地视频在iphone上播放不了。
document.querySelector('body').addEventListener('click', function() {var player = new MP4Player(new Stream('img/cat.mp4'), false, '', 'auto');player.play();document.querySelector('#containerMP4').innerHTML = '';document.querySelector('#containerMP4').appendChild(player.canvas);
});2、jsmpeg
jsmpeg是一个 MPEG1 解码器，个人觉得代码比较轻量。
var canvas = document.getElementById('canvas2'),off1 = true;
var audio = document.getElementById("bgMusic");
$('#canvas2').on("click",function(e){e.preventDefault();if(off1){off1 = false;document.querySelector('#loadWrap2').style.display = 'block';var player = new jsmpeg('img/cat.mpg', {canvas: canvas,onload : function(){document.querySelector('#loadWrap2').style.display = 'none';player.play();},onfinished : function(){off1 = true;}});}
})以上两种方法都可以实现视频的不全屏播放，终于解决了一个大问题，但是对于专门做视频开发的不知道适不适用了。
另外还有一种方法，就是将图片转成一个个帧了，个人觉得有点麻烦，但是对于短视频来讲也可以采用。麻烦的就是用工具将视频转成图片了。
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);var audio = document.getElementById("bgMusic");//添加图片进数组function pushImgArr (num) {document.querySelector('#loadWrap2').style.display = 'block';//播放(继续播放)audio.play();imgArr = [];for( var i = 0;i < num;i++ ) {imgArr.push('videoImg/'+i+'.jpg');};imgLoad ();};//图片加载function imgLoad(){document.querySelector('#btn-play').style.display = 'none';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);//停止audio.pause();audio.currentTime = 0;}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(30);};
