使用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. jQuery Validate 使用

    jQuery Validate 使用 <script src="js/b/js/jquery.validate.js"></script> <styl ...

  2. 4.非关系型数据库(Nosql)之mongodb:普通索引,唯一索引

     一:普通索引 1创建一个新的数据库 > use toto; switched to db toto > show dbs; admin (empty) local 0.078GB & ...

  3. update_notifier 造成nodejs进程数量增长的问题

    最近运维老大j哥找到我说了一个事儿:某私有化部署的线上环境nodejs进程数量多达1000+,对比公版线上环境的66个进程数显得十分诡异.并且单个nodejs进程所占用swap空间也较大,也不释放空间 ...

  4. Cocos2d-X开发中国象棋《三》開始场景的实现

    在前面两节(第一节.第二节)中介绍了中国象棋的功能和project文件.在这篇博客中将介绍中国象棋的開始场景的实现 在写代码前先理清一下实现開始场景的思路: 1.打开游戏后进入開始场景,场景上显示一个 ...

  5. @RestController注解的使用

    示例代码:/*@ResponseBody@Controller*/@RestControllerpublic class HelloController { @RequestMapping(" ...

  6. lucene 范围过滤

    Lucene里面有关于Filter的整体知识 下面,我们来看下具体的在代码里怎么实现,先来看下我们的测试数据 Java代码    id      score       bookname    ena ...

  7. .Net-ASP.NET Web API:目录

    ylbtech-.Net-ASP.NET Web API:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 0. https://www.asp.net/we ...

  8. Html5 ajax的跨域请求

    1.XMLHttpRequest升级版已经实现了跨域请求.不过需要在后台设置:header("Access-Control-Allow-Origin:http://www.a.com&quo ...

  9. python 46 css组合选择器 及优先级 、属性选择器

    一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器:    d ...

  10. Centos6系列安装nginx

    设置ssh服务为开机启动 输入命令:chkconfig sshd on 即可.注:若是chkconfig sshd off则禁止SSH开机启动 设定账号为bizuser ,密码为123456 第一步: ...