uni |
您所在的位置：网站首页 › 微信公众号里面的音乐如何自动播放呢 › uni |
|
文章目录
前言一、不能自动横屏的原因？二、在里就奉上代码总结
前言
video 组件 视频播放，在微信浏览器中点击全屏的时候不会自动横屏。客户说别人的为什么能自动横屏你的为什么不能，爆肝了两天，百度了一篇又一篇，什么x5属性往上加，pi用没有，然后看见一个内置旋转的方案，莫得办法，就用这个解决一下，好像做了又好像没做 一、不能自动横屏的原因？1.微信内置的设置横屏模式没开启 解决方案，让用户去开启微信的横屏模式，但是甲方不愿意，弃用 2.微信浏览器用的是X5核心 解决方案，让用户去微信聊天窗口发送 debugmm.qq.com/?forcex5=false 然后在点击，自动关闭X5。但是客户第一个解决方案都不愿意，这个方案是在想pi吃 3.内置旋转，但是微信公众号H5的导航栏，遮罩是遮罩不住的，伪全屏？ 二、在里就奉上代码H5的代码 CSS样式 .video-box { width: 750rpx; height: 422rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; z-index: 999; } .video { width: 750rpx; height: 422rpx; } #myVideo { width: 100%; height: 211px; z-index: 999; display: flex; align-items: center; justify-content: center; position: relative; } .ComedyScreenBox { z-index: 1000; position: absolute; right: 0; top: 0; width: 20px; height: 20px; padding: 5px; } .ComedyScreenBox image{ width: 64rpx; height: 64rpx; } .ComedyScreen { width: 100%; height: 100%; background-repeat: no-repeat; cursor: pointer; position: absolute; right: 0; transform: rotate(90deg); } .ComedyReturn { width: 100%; height: 100%; cursor: pointer; position: absolute; right: 0; transform: rotate(90deg); }js onShow() { let self = this window.addEventListener('orientationchange', function(event) { self.orientation=window.orientation //监听手机方向 竖屏 if (window.orientation == 180 || window.orientation == 0) { self.left = false self.ComedyScreen() // if (!that.ComedyScreenStatus) { // self.ComedyScreen(0, 'top') // } } //监听手机方向 横屏 if (window.orientation == 90 || window.orientation == -90) { self.left = true self.ComedyScreen(1,true) } }); }, methods: { ComedyScreen(status, title) { console.log(status) let _this = this; if (status) { this.$nextTick(function() { let that = this; uni.getSystemInfo({ success: function(res) { console.log(that.orientation) if (title || that.orientation == 90 || that.orientation == -90) { // 监听手机横屏的时候 自动给变成横屏方向播放 that.$refs.videoRef.$el.style.width = "100%"; that.$refs.videoRef.$el.style.height = "100%"; that.$refs.videoRef.$el.style.position = "absolute"; let top = (res.windowHeight - res.screenWidth) / 2; that.$refs.videoBox.$el.style.width = "100%"; that.$refs.videoBox.$el.style.height = "100%"; that.$refs.videoBox.$el.style.position = "fixed"; that.$refs.videoBox.$el.style.top = 0; that.$refs.videoBox.$el.style.left = 0; that.$refs.videoBox.$el.style.right = 0; that.$refs.videoBox.$el.style.bottom = 0; that.$refs.videoBox.$el.style.transform = "rotate(0deg)"; that.ComedyScreenStatus = true; } else { //点击全屏播放按钮走的逻辑 that.$refs.videoRef.$el.style.width = res.windowHeight + "px"; that.$refs.videoRef.$el.style.height = res.windowWidth + "px"; that.$refs.videoRef.$el.style.position = "absolute"; let top = (res.windowHeight - res.screenWidth) / 2; that.$refs.videoBox.$el.style.width = res.windowHeight + "px"; that.$refs.videoBox.$el.style.height = res.windowWidth + "px"; that.$refs.videoBox.$el.style.position = "fixed"; that.$refs.videoBox.$el.style.top = top + "px"; that.$refs.videoBox.$el.style.left = -top + "px"; that.$refs.videoBox.$el.style.transform = "rotate(90deg)"; that.ComedyScreenStatus = true; } } }); }); } if (!status) { //退出全屏，或者竖屏进入的方法 this.$nextTick(function() { let that = this; uni.getSystemInfo({ success: function(res) { console.log(that.$refs.videoRef, that.$refs) that.$refs.videoRef.$el.style.width = "100%"; that.$refs.videoRef.$el.style.height = "211px"; that.$refs.videoRef.$el.style.position = "relative"; that.$refs.videoBox.$el.style.width = "100%"; that.$refs.videoBox.$el.style.height = "211px"; that.$refs.videoBox.$el.style.position = "fixed"; that.$refs.videoBox.$el.style.top = "0px"; that.$refs.videoBox.$el.style.left = "0px"; that.$refs.videoBox.$el.style.transform = "rotate(0deg)"; that.ComedyScreenStatus = false; that.left = false } }); }); } }, } 总结效果很差，微信公众号自带的导航栏，遮不住，好像也要去开启横屏模式？所以写了个寂寞，拿去看看就好，用这个写出来甲方那边应该也不同意，真的越写越自闭，所以在线等解决方案 欢迎大家评论交流。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |