使用vue-video-player在移动端微信内置浏览器打开,点击视频自动全屏问题。 参考官方 API 是 H5 同层浏览器的原因,可通过设置video属性来处理。

 <video-player class="video-player vjs-custom-skin "
ref="videoPlayer"
:playsinline='true'
:options='videoOptions'
@canplay="onPlayerCanplay($event)"
>
</video-player>
onPlayerCanplay (player) {
let ua = navigator.userAgent.toLocaleLowerCase() // x5内核
if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) { $('body').find('video')
.attr('x-webkit-airplay', 'true') //设置允许设备播放
.attr('x5-playsinline', 'true') // 设置android在微信中内联播放视频 .attr('x5-video-player-type','web') // 关闭同层X5内核播放器 x5-video-player-type='h5' 启用H5同层播放器
// .attr('x5-video-player-fullscreen','true') // 进入全屏通知
.attr('x5-video-orientation','portrait') //控制横竖屏 可选值: landscape 横屏, portraint竖屏 默认值:portraint
} else {
// ios端
// alert('ios')
$('body').find('video')
.attr('webkit-playsinline', 'true') //设置ios在微信中内联播放视频 ios9
.attr('playsinline', 'true') //设置ios在微信中内联播放视频 ios10/ios11
}
},

X5内核浏览器,video兼容的更多相关文章

  1. X5内核浏览器video自动全屏解决办法-canvas

    最近在做手机端上面播放视频的项目,但是在安卓上面,video的播放是脱离页面,置于最顶层的,所以带来了很多问题,为了解决这个问题,查看了多方资料,写了下面简单的demo,方便以后使用. 下面就是运用c ...

  2. android 腾讯x5内核 浏览器

    1.浏览器内核: 主流浏览器内核介绍(前端开发值得了解的浏览器内核历史) 浏览器内核历史介绍: 在android 4.4之前,浏览器用的还是webkit 在android 4.4之后,google就抛 ...

  3. X5 内核浏览器对json格式支持的一个小区别

    var json1 = { "data": [{ "type": "pic", "filename": "P6 ...

  4. QQ浏览器X5内核问题汇总

    原文:http://itindex.net/detail/53391-qq-浏览器-x5 常常被人问及微信中使用的X5内核的问题,其实我也不是很清楚,只知道它是基于android 4.2的webkit ...

  5. 转{QQ浏览器X5内核问题汇总}

    转自https://www.qianduan.net/qqliu-lan-qi-x5nei-he-wen-ti-hui-zong/ 常常被人问及微信中使用的X5内核的问题,其实我也不是很清楚,只知道它 ...

  6. 微信、QQ浏览器X5内核问题汇总

    一. 资料汇总 1.前端H5调起QQ浏览器的总结:http://km.oa.com/group/22486/articles/show/210189?kmref=search 2.Android We ...

  7. QQ浏览器X5内核问题汇总 转

    常常被人问及微信中使用的X5内核的问题,其实我也不是很清楚,只知道它是基于android 4.2的webkit,版本号是webkit 534.今天正好从X5团队拿到了一份问题汇总,梳理下发出来,给各位 ...

  8. 静态集成腾讯TBS X5内核WebView,从微信提取新版30M浏览器内核打包进apk

    目录 前情提要 第一步:下载老版本SDK得到jar 获取SDK 集成SDK 步骤二.下载提取最新TBS X5内核 方法1:从微信中提取 方法2:App内内访问tbs调试页安装新内核 步骤三.集成内核到 ...

  9. 腾讯X5内核使用详解(X5内核播放器使用如何去除控制栏全屏播放)以及一些注意事项

    例子下载地址 https://www.lanzous.com/i2zsv5g      GIT就不用了麻烦的不行 本人安卓刚学 就上X5内核弄了老长时间由于对maven 和idea不熟悉刚开始导包都是 ...

随机推荐

  1. 关于重置IOS App请求推送的授权请求

    项目要加入推送通知.測试完本地通知后.发现測不了远程通知.于是想重置授权请求. 下面是重置授权请求的方法: 方法一: 通用->还原->抹掉全部内容和设置 可是第一种方法非常费时,抹掉内容预 ...

  2. SpringMVC案例2----基于spring2.5的注解实现

    和上一篇一样,首先看一下项目结构和jar包 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmVuamFtaW5fd2h4/font/5a6L5L2T/fo ...

  3. cacti安装和第三方模块的导入

    Cacti是一套基于PHP,MySQL,SNMP及RRDTool开发的网络流量监測图形分析工具.Cacti是通过 snmpget来获取数据,使用 RRDtool绘绘图形,并且你全然能够不须要了解RRD ...

  4. 解析Qt元对象系统(五) Q_INVOKABLE与invokeMethod(automatic connection从Qt4.8开始的解释已经与之前不同,发送对象驻足于哪一个线程并不重要,起到决定作用的是接收者对象所驻足的线程以及发射信号(该信号与接受者连接)的线程是不是在同一个线程)good

    概述查看Qt源码可知,Q_INVOKABLE是个空宏,目的在于让moc识别. 使用Q_INVOKABLE来修饰成员函数,目的在于被修饰的成员函数能够被元对象系统所唤起. Q_INVOKABLE与QMe ...

  5. wox 快速搜索程序

    windows启动栏的搜索,会经常找不到exe. 使用wox可以非常快速的找到启动程序 https://github.com/Wox-launcher/Wox/ 安装完成后,默认alt+space出现 ...

  6. B1192 [HNOI2006]超级英雄Hero 二分图匹配

    先检讨一下,前一段时间开学,做题懒得发博客,也不总结...现在捡起来. 这个题一看是裸的二分图匹配,但是仔细一看还有一些区别,就是必须要连续的连接,否则直接退出.因为前一道题答不出来的话后面的题就没有 ...

  7. DCloud-MUI:下拉刷新、上拉加载

    ylbtech-DCloud-MUI:下拉刷新.上拉加载 1. 下拉刷新返回顶部 0. http://dev.dcloud.net.cn/mui/pulldown/ 1. 概述 为实现下拉刷新功能,大 ...

  8. 84. ExtJS下页面显示中文乱码问题

    转自:https://blog.csdn.net/wenminhao/article/details/51198981 最近在学校extjs是,使用js脚本显示中文在html页面中时,中午出现了乱码的 ...

  9. leetcode链表相关

    目录 2/445两数相加 综合题(328奇偶链表, 206反转链表, 21合并两个有序链表 ) 92反转链表 II 链表排序(148排序链表, 876链表的中间结点) 142环形链表 II 160相交 ...

  10. Coursera Algorithms week1 算法分析 练习测验: Egg drop 扔鸡蛋问题

    题目原文: Suppose that you have an n-story building (with floors 1 through n) and plenty of eggs. An egg ...