摘要：在網(wǎng)上看到好論壇類似的基本問題，以前有申請白名單的，在白名單的視頻鏈接或者騰訊旗下的視頻鏈接是原生播放，否則安卓會被劫持成騰訊家的播放器播放并且默認全屏，目前通過白名單的方法是解決不了的。

最近公司做一個視頻活動的HTML5頁面，頁面并不復雜，但是要求視頻播放的時候不全屏。在網(wǎng)上看到好論壇類似的基本問題，以前有申請白名單的，在白名單的視頻鏈接或者騰訊旗下的視頻鏈接是原生播放，否則安卓會被劫持成騰訊家的播放器播放并且默認全屏，目前通過白名單的方法是解決不了的。還好終于找到了解決辦法，下面好好整理一下。

也就是所謂的開啟同層播放器

x5-video-player-type="h5" /*讓video開啟同層H5播放器*/
x5-video-player-fullscreen="true" /*設置為 true 是防止橫屏*/
playsinline="true" 和 webkit-playsinline="true" /*這個屬性是ios中設置可以讓視頻在小窗內(nèi)播放*/

上面的方法試了，在ios中可以不全屏，但是在安卓的微信中打開依然是全屏的。。。

視頻解碼最好用FFmpeg轉(zhuǎn)碼，可以轉(zhuǎn)mp4、mpeg、mkv....,還可以提取視頻中的音樂。

mp4轉(zhuǎn)MP4

ffmpeg -i D:Projectscat.mp4 -vcodec libx264 -pass 1 -coder 0 -bf 0 -flags -loop -wpredp 0 out.mp4

mkv轉(zhuǎn)MP4

ffmpeg -i D:Projectscat.mkv -c:v copy -c:a copy cat.mp4

提取音樂

ffmpeg -i D:Projectscat.mp4 -f mp3 -vn apple.mp3

mp4轉(zhuǎn)mpeg,視頻的寬度必須是2的倍數(shù)

ffmpeg -i  D:Projectscat.mp4 -f mpeg1video -vf "crop=iw-mod(iw,2):ih-mod(ih,2)" -b 0 cat.mpg

其他使用方法可以到官網(wǎng)中查找，這里就不多介紹了。

1、Broadway

Broadway是從其他語言翻譯而成，這個解碼器支持 mp4 后綴的視頻文件，有時候即使是手機拍攝的mp4格式的視頻也沒什么用，最好還是用ffmpeg再轉(zhuǎn)一下格式。視頻的地址最好是在線的地址，本地測試的時候本地視頻在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;
            }
        });
     }
})

以上兩種方法都可以實現(xiàn)視頻的不全屏播放，終于解決了一個大問題，但是對于專門做視頻開發(fā)的不知道適不適用了。
另外還有一種方法，就是將圖片轉(zhuǎn)成一個個幀了，個人覺得有點麻煩，但是對于短視頻來講也可以采用。麻煩的就是用工具將視頻轉(zhuǎn)成圖片了。

    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");
    //添加圖片進數(shù)組
    function pushImgArr (num) {
        document.querySelector("#loadWrap2").style.display = "block";
        //播放(繼續(xù)播放)
        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";
                //執(zhí)行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);
        
    };