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 相关文章推荐
文字幻灯片
Jun 26 Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 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
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
javascript html 静态页面传参数
2009/04/10 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
python实现apahce网站日志分析示例
2014/04/02 Python
Python 含参构造函数实例详解
2017/05/25 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
英国网上购买门:Direct Doors
2018/06/07 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
2013年学期结束动员演讲稿
2014/01/07 职场文书
关爱老人标语
2014/06/21 职场文书
信访工作汇报材料
2014/10/27 职场文书
岳庙导游词
2015/02/04 职场文书
护士节慰问信
2015/02/15 职场文书
校园之声广播稿
2015/08/18 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android