飞龙博客

妙法莲华经

playsinline属性完美解决禁止video全屏播放

feilong.org 修订于2019-06-03 11:37:40

playsinline属性完美解决

-webkit-playsinline、webkit-playsinline、playsinline是禁止全屏播放的三个兼容性属性,其中,playsinline可完美解决ios端禁止全屏播放

ios,安卓实现video小屏播放,不全屏播放的方法



在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素。

 

还有个问题,在android的微信里面,就算加上了上面的属性,还会出现上下有黑边,不能全屏的问题。

解决办法:给video加上 object-fit: fill;的 css 属性。

X5内核浏览器video自动全屏解决办法
2017年01月04日 21:34:31 webs100 阅读数:10991
很多在做直播的朋友经常会问:微信、QQ浏览器使用video标签播放时如何不自动全屏?我需要在video容器中播放!

腾讯官方的答复是:

之前开放过“白名单”,现在已经取消,只有当初加入到“白名单”中的域名才可以不自动全屏,我们将会在9月(2016年9月)更新X5内核,开放代码让用户自行控制。

结果,9月的更新很令人失望,使用

 

的结果是这样:

面对腾讯给出的结果,我们后来者就只能听从官方的答复,破坏视频在微信、QQ中的用户体验吗?答案当然不是!

我们进一步分析:video标签自动全屏,那canvas画布呢?

经过试验证明,微信、QQ自带的X5内核浏览器支持canvas渲染视频,问题解决!

解决步骤

video标签增加属性,使浏览器调用h5原生video

增加css使video隐藏

video{display:none}

在页面中添加canvas画布


写入js代码

    //获取video

    var oLiveVideo=document.getElementById("liveVideo");

    //获取canvas画布

    var oLiveCanvas=document.getElementById("liveCanvas");

    //设置画布

    var oLiveCanvas2D=oLiveCanvas.getContext('2d');

    //设置setinterval定时器

    var bLiveVideoTimer=null;

    //监听播放

    oLiveVideo.addEventListener('play',function() {

        bLiveVideoTimer=setInterval(function() {

            oLiveCanvas2D.drawImage(myPlayer,0,0,640,320);

        },20);

    },false);

    //监听暂停

    oLiveVideo.addEventListener('pause',function() {

        clearInterval(bLiveVideoTimer);

    },false);

    //监听结束

    oLiveVideo.addEventListener('ended',function() {

        clearInterval(bLiveVideoTimer);

    },false);

需要源代码的朋友,在公众号回复 demo 即可获得下载地址

x5微信内核浏览器video全屏方案(下)
2019年02月26日 10:38:00 weixin_33887443 阅读数:3
对于视频宽高比是2:1视觉比较宽的视频来说,如果希望视频下面还想放一些评论列表,ios没问题,安卓这时候就需要改变视频进入全屏后的视频位置,假设说希望视频在顶部,怎么做呢?

 

html, object-position,video的css属性是用来设置视频画面的位置(x,y),默认是居中的,这里是x 0,y 0,播放后如图1所示。



我是固定的哦!
js
  • 学生车
  • 何须谈玄说妙,
    莫道千难万险。
    只同仁者携手,
    共创一片蓝天。
飞龙前端QQ群