在微信和QQ浏览器中无法全屏播放视频

最近公司做一个视频活动的HTML5页面，页面并不复杂，但是要求视频播放的时候不全屏。在网上看到好论坛类似的基本问题，以前有申请白名单的，在白名单的视频链接或者腾讯旗下的视频链接是原生播放，否则安卓会被劫持成腾讯家的播放器播放并且默认全屏，目前通过白名单的方法是解决不了的。还好终于找到了解决办法，下面好好整理一下。

向视频标签添加属性

   <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中可能不是全屏，但是在Android微信中打开时仍是全屏. .

视频解码

最好使用FFmpeg转码进行视频解码，它可以转换mp4qq浏览器云播放，mpegqq浏览器云播放，mkv ...，还可以从视频中提取音乐.

mp4到MP4

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

将mkv转换为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.mp3

mp4到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，百老汇

百老汇是从其他语言翻译而来的. 此支持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);
        
    };
        

文章来源：segmentfault，作者：小mon。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：william.shi#ucloud.cn（邮箱中#请改为@）进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。

背景-系统设置-扩展变量-移动广告空间-内容主体底部

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-182124-1.html