video在微信和QQ浏览器中不全屏播放解决

singerye 发布于2019-07-16 16:07 / 2616人阅读

摘要：在网上看到好论坛类似的基本问题，以前有申请白名单的，在白名单的视频链接或者腾讯旗下的视频链接是原生播放，否则安卓会被劫持成腾讯家的播放器播放并且默认全屏，目前通过白名单的方法是解决不了的。

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

在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:Projectscat.mp4 -vcodec libx264 -pass 1 -coder 0 -bf 0 -flags -loop -wpredp 0 out.mp4

mkv转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转mpeg,视频的宽度必须是2的倍数

ffmpeg -i  D:Projectscat.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);
        
    };

混合云 idc机房托管服务器窗口显示不全屏全屏播放视频播放全屏禁止全屏播放

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/34637.html

video在微信和QQ浏览器中不全屏播放解决

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

zr_hebo 2019-06-21 16:17 评论0 收藏0
手机浏览器自动播放视频video（设置autoplay无效）的解决方案

摘要：参考链接禁止自动播放后，有什么比较好的方法实现的自动播放吗微信自动播放视频可交互，设置层级，无控制条，非视频下安装系统安装使用音视频播放和常见的坑处理在微信和浏览器中不全屏播放解决 1、问题的提出某一天接了个需求，需要在手机的H5页面内加入视频，我开开心心做完，准备交付的时候，问题来了，PM想要用户一进入页面，视频就开始播放，不需要用户手动点击。 2、尝试解决加autoplay 视...

fyber 2019-08-23 12:57 评论0 收藏0
手机浏览器自动播放视频video（设置autoplay无效）的解决方案

摘要：参考链接禁止自动播放后，有什么比较好的方法实现的自动播放吗微信自动播放视频可交互，设置层级，无控制条，非视频下安装系统安装使用音视频播放和常见的坑处理在微信和浏览器中不全屏播放解决 1、问题的提出某一天接了个需求，需要在手机的H5页面内加入视频，我开开心心做完，准备交付的时候，问题来了，PM想要用户一进入页面，视频就开始播放，不需要用户手动点击。 2、尝试解决加autoplay 视...

UsherChen 2019-08-02 11:58 评论0 收藏0
手机浏览器自动播放视频video（设置autoplay无效）的解决方案

摘要：参考链接禁止自动播放后，有什么比较好的方法实现的自动播放吗微信自动播放视频可交互，设置层级，无控制条，非视频下安装系统安装使用音视频播放和常见的坑处理在微信和浏览器中不全屏播放解决 1、问题的提出某一天接了个需求，需要在手机的H5页面内加入视频，我开开心心做完，准备交付的时候，问题来了，PM想要用户一进入页面，视频就开始播放，不需要用户手动点击。 2、尝试解决加autoplay 视...

Jinkey 2019-06-21 16:18 评论0 收藏0
手机浏览器自动播放视频video（设置autoplay无效）的解决方案

摘要：参考链接禁止自动播放后，有什么比较好的方法实现的自动播放吗微信自动播放视频可交互，设置层级，无控制条，非视频下安装系统安装使用音视频播放和常见的坑处理在微信和浏览器中不全屏播放解决 1、问题的提出某一天接了个需求，需要在手机的H5页面内加入视频，我开开心心做完，准备交付的时候，问题来了，PM想要用户一进入页面，视频就开始播放，不需要用户手动点击。 2、尝试解决加autoplay 视...

scola666 2019-08-05 15:24 评论0 收藏0