使用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. Hdu oj 1012 u Calculate e

    分析:注意格式. #include<stdio.h> int main() { int i,j,k; double sum=0; printf("n e\n- --------- ...

  2. 《从零開始学Swift》学习笔记(Day 52)——Cocoa错误处理模式

    原创文章,欢迎转载. 转载请注明:关东升的博客 Swift错误处理模式,在Swift1.x和Swift 2.0是不同的两种模式. Swift 1.x代码错误处理模式採用Cocoa框架错误处理模式,到如 ...

  3. 5200 fqy的难题----2的疯狂幂

    5200 fqy的难题----2的疯狂幂  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description ...

  4. Android Back键和Home键的区别

    back键 Android的程序无需刻意的去退出,当你一按下手机的back键的时候,系统会默认调用程序栈中最上层Activity的Destroy()方法来,销毁当前Activity.当此Activit ...

  5. bzoj 3209 花神的数论题 —— 数位DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3209 算是挺简单的数位DP吧,但还是花了好久才弄明白... 又参考了博客:https://b ...

  6. bzoj3211: 花神游历各国(线段树) 同codevs2492

    3211: 花神游历各国 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 3628  Solved: 1326[Submit][Status][Discu ...

  7. selenium3 + python - expected_conditions判断元素

    expected_conditions 类 title_is: 判断当前页面的title是否完全等于(==)预期字符串,返回布尔值 title_contains : 判断当前页面的title是否包含预 ...

  8. android切换卡顿解决方法

    如果想要让应用用户流畅的滑动体验的话,那么就必须对activity和fragment的生命周期有一个完整的概念以及在何种情况下会触发哪些事件. 在自己目前做的项目中,就遇到了这样的问题,那么就把自己的 ...

  9. angular js 正序倒叙

      <!DOCTYPE html>   <html lang="en">   <head>   <meta charset="U ...

  10. list用法(用到了再补充)

    之前学list吧,也知道很多,但是到用的时候却无从下手,还是不熟悉的缘故,看来基础知识应该再加强,要达到信手拈来的程度才行. 先说下list的特性:有序可重复,也可以存储多个空值. 我用到的方法: L ...