vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)


Posted in Javascript onFebruary 25, 2020

对于vue-video-player,从github上找到一段代码,直接放页面!可以了,视频展示出来了!开始下一个功能。。。。

这可能是大部分前端开发者一贯的思维模式,拿来一个插件,看着demo就做出来了,功能展示正常就OK了,但是一旦出了bug,就会面向百度编程或者面向Google编程!

其实,我也是这样的,哈哈哈哈.....

废话不多说,最近在做一个视频播放的功能,找到vue-video-player插件后,咔咔咔完事,拿着我的爱疯,完美演绎!但是其他人的国产某牌手机,展示的完全不一样,打开后自动全屏,而且还有个横竖屏控制。“这是我写的页面?????”,心中一万只神兽在奔腾。横竖屏切换后,视频下的内容在全屏模式下展示了出来一部分。

百度了半天,看源码,还是不知道咋回事。

后来终于找到了解决办法:

之前:playsinline="playsinline"这里是true写死的,现在改为计算属性playsinline()

computed: {
  player () {
   return this.$refs.videoPlayer.player
  },
  playsinline () {
   let ua = navigator.userAgent.toLocaleLowerCase()
   // x5内核
   if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
    return false
   } else {
    // ios端
    return true
   }
  }
 }

添加playsinline()这个计算属性,原因是在安卓和iOS端微信使用的内核不同,所需要的attribute也不同,尝试后,采用x5内核返回false,反之为true

配合jq工具,继续添加两个端所需的属性 

@canplay="onPlayerCanplay($event)"
onPlayerCanplay (player) {
   var 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).attr('webkit-playsinline', true).attr('playsinline', true)
   } else {
    // ios端
    $('body').find('video').attr('webkit-playsinline', 'true').attr('playsinline', 'true')
   }
  },

至此,完美解决安卓端微信播放时,横竖屏的播放样式错乱和播放时视频内容未自适应。

为兼容ios横屏将视频旋转90度

methods: {

// 视频宽高设置为手机宽高
    videoFullScreen() {
      let width = document.documentElement.clientWidth;
      let height = document.documentElement.clientHeight;
      document.getElementById('video_content').style.height = width + 'px';
      document.getElementById('video_content').style.width = height + 'px';
    },
  }
/*视频旋转*/
.video_box_rotate{

  transform rotate(90deg)
}

视频监听播放结束、进入全屏、退出全屏事件

mounted() {this.videoEnd()},
methods: {
  videoEnd(){


let video = document.getElementById('video_content');



video.addEventListener('ended', () => {




alert('video end')



});


}; // 视频播放结束
}
// 全屏事件 x5videoenterfullscreen
// 退出全屏 x5videoexitfullscreen

监听手机横竖屏

window.addEventListener('orientationchange', function() {
          // alert(window.orientation); // 这里可以根据orientation做相应的处理
          if (window.orientation === -90) {
            self.iphoneScreenShow = true;
          } else {
            self.iphoneScreenShow = false;
          }
        }, false);

到此这篇关于vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)的文章就介绍到这了,更多相关vue-video-player 自动全屏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
通过js实现压缩图片上传功能
Feb 25 #Javascript
Vue实现简单计算器案例
Feb 25 #Javascript
使用Vue实现简单计算器
Feb 25 #Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 #Javascript
Vue实现简易计算器
Feb 25 #Javascript
js+canvas实现简单扫雷小游戏
Jan 22 #Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 #Javascript
You might like
西德产收音机
2021/03/01 无线电
PHP中动态显示签名和ip原理
2007/03/28 PHP
php URL编码解码函数代码
2009/03/10 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
广告显示判断
2006/08/31 Javascript
js 浮动层菜单收藏
2009/01/16 Javascript
网页自动跳转代码收集
2009/09/27 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
Python中__init__和__new__的区别详解
2014/07/09 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
python动态规划算法实例详解
2020/11/22 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
.NET方向面试题
2014/11/20 面试题
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
面试后感谢信
2014/02/01 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
艺术节开幕词
2015/01/28 职场文书
公司慰问信范文
2015/03/23 职场文书
Mysql基础之常见函数
2021/04/22 MySQL