Android微信视频播放填坑指南_网易智企的博客-程序员宅基地

技术标签: 广告  css  js  html  javascript  

某日,正在愉快着敲着代码的我,突然发现了一个诡异的现象,在Android微信中,只要视频播放后,不能把普通dom元素(div等)覆盖在video上,就算是z-index为9999999也无法实现,如图:

我只是播放了一下视频,怎么结构样式全部发生了变化,还有我覆盖在视频上的小按钮呢?

我们知道,Android的微信浏览器,是基于X5内核进行渲染。那么,这样的现象会不会X5的一个bug?经过资料的查询,发现在Android微信中,video标签会自动被X5所劫持,换成原生的播放器去播放,也就是说,我们看到的video其实不在是html5规范里面的那个video了,已经被脱离文档流换成微信的播放器,自然,z-index已经起不到什么作用了,同时播放完成后你甚至可以看到腾讯的广告(是不是有一万只草泥马飘过)。官方的人是这么解释的:

X5内核视频播放使用了自研的播放器,考虑用户体验,我们使用了统一的播放界面。如果有相关问题,请联系腾讯浏览服务产品经理做进一步交流。(就是这么霸气~不要问为什么,因为很cooooooool~~~)

那么有没有什么方法去解决被劫持的问题呢?答案是:有的

方案1

我们发现X5内核加载页面后,会有这么一段JS代码注入到页面中。同时发现这一些网站上的video没有被劫持,拿bilibili为例,发现bilibili的视频上只是加了一个(如下图)但是,对应到我们自己的video加上该属性,没有起到任何作用,也就是说,x5内核存在白名单机制,只要申请了白名单,就可以不被劫持,愉快的使用标准的video标签渲染视频了。

Q: 那么怎么申请白名单呢?

A:官方已经去掉了申请白名单入口,已经没有办法在申请了

Q:既然不能申请白名单,还说什么?浪费时间!

A:这样才能愉快的介绍方案2

方案2

在浏览X5的时候,我们找到了这样一个文档(戳阅读原文可以直接点开):https://x5.tencent.com/tbs/guide/video.html, 同层浏览器,什么意思呢,就是说,如果你在video标签上添加 x5-video-player-type="h5" 和 x5-video-player-fullscreen="true"就可以实现用元素去覆盖video这样一个功能了(初见文档内心还有一点小激动,可用起来,还有很多坑需要去填)

既然官方已经声明了可以用,那么我们就用来试试看,根据官方定义,使用同层浏览器后,就可以将普通元素覆盖到video上,但是,声明同层浏览器,会自动在播放视频的时候,进行全屏,像这样:

按照官方文档所述,只要修改video元素的「object-position」属性,就可以修改视频部分的显示位置,但实际上还要把video元素的宽高设成屏幕的宽高才行:

使用NEJ语法改写如下:

_event._$addEvent(this._videoNode, "x5videoenterfullscreen", this._onx5VideoEnterFullScreen._$bind(this));
_event._$addEvent(this._videoNode, "x5videoexitfullscreen", this._onx5VideoExitFullScreen._$bind(this)); // x5内核浏览器全屏
    _pro._onx5VideoEnterFullScreen = function () {
        _element._$setStyle(this._videoNode, 'width', window.screen.width + 'px');
        _element._$setStyle(this._videoNode, 'height', window.screen.height + 'px');
        _element._$addClassName(document.body,'z-x5-video-fullscreen');
    }

    _pro._onx5VideoExitFullScreen = function () {
        _element._$setStyle(this._videoNode, 'width', '');
        _element._$setStyle(this._videoNode, 'height', '');
        _element._$delClassName(document.body,'z-x5-video-fullscreen');
        _element._$delClassName(document.body,'z-x5-video-fullscreen-landscape');
    }
video{
    object-position:center top
}

改写后:

使用object-position样式配合全屏video,就可以将显示部分加到任意想要的地方了,然后通过给其他元素设置z-index值大于video的z-index,就可以完成覆盖了

(欢呼,撒花 ╰(°▽°)╯)

你以为文章这么简单就完了吗?

太天真了,产品同学是不会提这么简单的需求的!

产品同学:你的这个不能全屏啊,给加个全屏。

A: 全屏还不容易吗,全屏api就是requestFullScreen嘛,微信里面就是webkitRequestFullScreen

来我们掉用一下,诶?怎么不对劲,用控制台打印微信内容,确实有这个方法,怎么调用无效呢;诶,我先调用api,在去播放视频就可以全屏了;但是我先播放视频在去调用api发现X5是不会理我们的!!这应该是一个X5的bug,同时还发现,使用video原生controls上的全屏按钮而不是api也是可以全屏的!

也就是说,在播放的时候去调用全屏api是无法实现全屏的,那么只能通过其他手段来实现全屏,通过不断的去摸索,发现文档中介绍了x5内核的video会有这样一个属性x5-video-orientation,这个属性用于控制播放器全屏状态下是横屏展示还是竖屏展示,默认是竖屏,那么基于这个属性,可否间接满足全屏条件呢。经过探索在调用全屏api时,设置该属性,可以实时的控制播放器横屏和竖屏,那么实现就简单了。

//判断
  if (_mobileUtil._$isWeixin() && _mobileUtil._$isAndroid()) {                var node = document.querySelector('#video');                // 模拟全屏
                _element._$attr(node, 'x5-video-orientation', 'landscape');                //添加全屏全局样式
                _element._$addClassName(document.body, 'z-x5-video-fullscreen-landscape');
                setTimeout(function () {  
                   //因为横屏宽高发生了变化,所以设置宽高
                    node.style.width = window.screen.width + 'px';
                    node.style.width = window.screen.height + 'px';
                });
            } else {                this._rootNode.webkitRequestFullScreen();
            }

同理,取消全屏,只需要设置x5-video-orientation的值为portrait即可

 if (_mobileUtil._$isWeixin() && _mobileUtil._$isAndroid()) {                var node = document.querySelector('.j-mainVideo video');
                node.setAttribute('x5-video-orientation',"portrait");
                setTimeout(function () {
                    node.style.width =window.screen.width+'px';
                    node.style.width =window.screen.height+'px';
                }._$bind(this));
            } else {                document.webkitCancelFullScreen();
            }

同时,点击左上角的按钮会退出视频播放,也应该清除全屏

 _pro._onx5VideoExitFullScreen = function () {
        _element._$setStyle(this._videoNode, 'width', '');
        _element._$setStyle(this._videoNode, 'height', '');
        _element._$delClassName(document.body,'z-x5-video-fullscreen');
        _element._$delClassName(document.body,'z-x5-video-fullscreen-landscape');  // 退出后需要设置为竖屏全屏,x5内核
        _element._$attr(this._videoNode, 'x5-video-orientation', 'portrait');
    }

结果



  1. x5内核接管了video的播放,体验和苹果是不同的,如果能加入白名单最好加入白名单

  2. 默认的x5播放器会播放广告,体验极差

  3. 同级播放器有一定的bug,需要通过一些api手段去规避解决

——【特别推荐】——

歪果仁短视频花式玩法

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/netease_im/article/details/110047278

智能推荐

docker-compose整理_橙中程的博客-程序员宅基地

概述Compose 项目是 Docker 官方的开源项目,负责实现对 Docker 容器集群的快速编排。从功能上看,跟 OpenStack 中的 Heat 十分类似。其代码目前在 https://github.com/docker/compose 上开源。Compose 定位是 「定义和运行多个 Docker 容器的应用(Defining and running multi-container Docker applications)」,其前身是开源项目 Fig。我们知道使用一个 Dockerfil

spring常用注解使用讲解_zhangjikuan的博客-程序员宅基地

spring常用注解使用讲解本文讲述spring的几个常用的注解@RequestMapping @[email protected]@[email protected]一、@RequestMapping RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上。用于类上,表示类中的所有响应请求的方法都

Hive 笔记之 加载数据时,找不到文件路径异常_IU菜籽U的博客-程序员宅基地_hiveloadhdfs数据找不到路径

一 异常截图如图:二 异常来源:向分区表中加载数据时如下图命令:红色部分为数据路径load data local inpath ' /sogou_3/500w/sogou.500w.utf8'  into table sogou_partition_3  partition(year='2011',month='12',day='30',hour='10')

6-3 django在线教育平台----用户登录2_嘟嘟ha的博客-程序员宅基地

1、填写用户名和密码,点击提交,查看参数request,交互方法是POST方法,可以看到POST中的参数是以键值对的形式存储的,是QueryDict

Centos 更改权限和用户组_Alice_Granger的博客-程序员宅基地_centos修改用户组权限

1、在命令行使用命令“ll”或者“ls -a”,可以查看文件或者文件的权限:-rw-r--r--. 1 root root 6 Nov 9 16:42 a.txt其中“-rw-r–r--”表示权限,一共有十个字符。第一个字符,如果是“-”则表示是文件,如果是“d”则表示是目录(directory)。后面9个字符每3个字符又作为一个组,则有3组信息(“rw-”、“r–”、“r–”),分别...

随便推点

centos下安装MySQL-python_feifeilyj的博客-程序员宅基地

1) 下载MySQL-pythonwget https://pypi.python.org/packages/a5/e9/51b544da85a36a68debe7a7091f068d802fc515a3a202652828c73453cad/MySQL-python-1.2.5.zip#md5=654f75b302db6ed8dc5a898c625e030c2) 解压缩unz

JavaScript的组成部分之操作对象与表单_I'm sure ok!的博客-程序员宅基地

文章目录1.JavaScript的组成部分2.操作BOM对象1).Window2).Navigato(导航)3).screen4).location5).document6).history3.操作DOM对象1).获得dom节点1.JavaScript的组成部分javascript组成一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:核心(ECMAScript)、文档对象模...

远程服务调用之RMI、Hessian、Burlap、Spring的HTTPinvoker_tomoto_zh的博客-程序员宅基地

RMI:在服务端,使用RmiServiceExporter把POJO包装到RMI服务适配器中,并将服务适配器绑定到RMI注册表中,从而将POJO转换为RMI服务,在客户端,RMI服务将远程服务使用一个代理装配进来,使得我们可以像使用本地服务一样使用远程服务;它使用二进制协议,使用Java标准的对象序列化机制,只能服务于Java服务。Hessian、Burlap:Hessian和Burlap一样

python读取ini文件所有节点,使用Python将ini文件中的所有内容读入字典_乔安娜Joanna的博客-程序员宅基地

Normally, I code as follows for getting a particular item in a variable as followstry:config = ConfigParser.ConfigParser()config.read(self.iniPathName)except ConfigParser.MissingSectionHeaderError, e:...

dxtrans.h 文件不能找到_butwang的博客-程序员宅基地

来源:在Ogre使用dshow显示视频时。solution:在D:/Program Files/Microsoft Visual Studio 9.0搜索dxtrans.h复制到 :/Program Files/Microsoft Visual Studio 9.0/VC/include

Lazada包邮/捆绑销售促销活动怎么设置_MTGR0302的博客-程序员宅基地

包邮产品相比不包邮的产品的出单率会高很多包邮产品相比不包邮的产品的出单率会高很多,另外捆绑销售一方面能提高店铺产品客单价,另一方面还能提升店铺销量,所以这两者的设置也不可忽视。1.包邮设置包邮设置需要注意的相关事项:正常店铺产品控制好自身的销售利润合理的设置产品是否包邮(正常售卖产品建议常年设置包邮)。同时还要考虑活动期间是否要设置包邮:根据平台活动要求,跟进是否设置包邮,如:活动不要求包邮,那么可以减掉运费设置不包邮,通过更低的价格吸引消费者进入店铺,获取更多的流量。根

推荐文章

热门文章

相关标签