使用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. Swift: 一句话获取虚拟机上APP所在的目录

    在XCode6上,虚拟机的App的存放位置发生了变化,通过下面语句,我们可以立即获得其所在的位置: println(NSTemporaryDirectory())

  2. CF #329 C

    C题我还以为是拉格朗日插值... 其实可以想象到,必须有这样一个函数,经过某一点时,其它圆相关的函数要为0. 于是,可以构造这样的一个函数,对于x有 (x/2)*(1-abs(t-i)+abs(1-a ...

  3. Loadrunner | 录制脚本时弹不出IE的解决办法

    Loadrunner在录制脚本的时候有时候会遇到弹不出IE的问题,那怎么解决呢?别急,按照以下几个步骤操作,一般就可以解决这个问题. 1. IE浏览器取消勾选[启用第三方浏览器扩展] 启动IE,从[工 ...

  4. PHP5+标准函数库观察者之实现

    PHP的观察者设计模式实现相对简单,可是PHP5+版本号中已经有标准库类库支持,我们仅仅需简单继承并实现就能够了. 观察者:实现标准接口类库SplSubject. 一个注冊方法:attach.一个取消 ...

  5. monitor weblogic server ,Very simple to use, weblogic监控、巡检、故障简单小工具

        1. 开发了一个简单的监视weblogic执行情况的小程序.各位朋友下载下来试试,不用登陆console就能够知道server的执行状况,包含了jvm.线程.jdbc.状态jms等:另一个更简 ...

  6. B1202 [HNOI2005]狡猾的商人 并查集

    其实就是并查集的题.维护一个前缀和,然后用并查集维护前缀和,每次判断是否合理就行了. 题干: Description 刁姹接到一个任务,为税务部门调查一位商人的账本,看看账本是不是伪造的.账本上记录了 ...

  7. 关于form/input 的autocomplete="off"属性

    转自:http://blog.sina.com.cn/s/blog_b49f96a701019m0d.html 一. 有过表单设计经验的朋友肯定知道,当我们在浏览器中输入表单信息的时候,往往input ...

  8. 前端常见面试题总结part2

    今天总结了几道,感觉非常有意思的题,有感兴趣的可以看下,有疑问请留言~ (答案在最后) 考察自执行函数的this指向 审题要细心 var n = 2, obj = { n:2, fn:(functio ...

  9. SpringMVC参数绑定(二)

    在springMVC中,提交请求的数据是通过方法形参来接收的,从客户端请求的key/value数据,经过参数绑定,将key/value数据绑定到controller形参上,然后再controller就 ...

  10. css样式变 及实际用法

    <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con ...