uniapp强制操作DOM使播放器微信内置浏览器页内旋转全屏横屏播放
主要代码块：
ComedyScreen(status){
let _this = this;
if(status){
this.$nextTick(function(){
let that = this;
uni.getSystemInfo({
success: function (res) {
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){
let _this = this;
this.$nextTick(function(){
let that = this;
uni.getSystemInfo({
success: function (res) {
that.$refs.videoRef.$el.style.width = "100%";
that.$refs.videoRef.$el.style.height = "220px";
that.$refs.videoRef.$el.style.position = "relative";
that.$refs.videoBox.$el.style.width = "100%";
that.$refs.videoBox.$el.style.height = "220px";
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;
}
});
});
}
},
<view class="videoBox" ref="videoBox" >
<video id="myVideo" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
controls object-fit="contain"
preload="auto"
:loop="false"
:playsinline="true"
:webkit-playsinline="true"
:x-webkit-airplay="true"
style="object-fit: contain;"
:show-center-play-btn="false"
:custom-cache="false"
ref="videoRef"
:show-fullscreen-btn="false" >
<cover-view class="">
Comedy
</cover-view>
</video>
<view class="ComedyScreenBox" >
<view class="ComedyScreen" @click.stop="ComedyScreen(1)" v-show="!ComedyScreenStatus"></view>
<view class="ComedyReturn" @click.stop="ComedyScreen(0)" v-show="ComedyScreenStatus"></view>
</view>
</view>
完整代码：
<template>
<view class="content">
<view class="videoBox" ref="videoBox" >
<video id="myVideo" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
controls object-fit="contain"
preload="auto"
:loop="false"
:playsinline="true"
:webkit-playsinline="true"
:x-webkit-airplay="true"
style="object-fit: contain;"
:show-center-play-btn="false"
:custom-cache="false"
ref="videoRef"
:show-fullscreen-btn="false" >
<cover-view class="">
Comedy
</cover-view>
</video>
<view class="ComedyScreenBox" >
<view class="ComedyScreen" @click.stop="ComedyScreen(1)" v-show="!ComedyScreenStatus"></view>
<view class="ComedyReturn" @click.stop="ComedyScreen(0)" v-show="ComedyScreenStatus"></view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
ComedyScreenStatus:false,
}
},
onReady: function (res) {
this.videoContext = uni.createVideoContext('myVideo')
},
methods: {
// 判断是否是微信
isWechart() {
var rst = true;
if (
window.navigator.userAgent.match(
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
)
) {
var ua = navigator.userAgent.toLowerCase();
if (!(ua.match(/MicroMessenger/i) == 'micromessenger')) {
rst = false;
}
} else {
rst = false;
}
return rst;
},
ComedyScreen(status){
let _this = this;
if(status){
this.$nextTick(function(){
let that = this;
uni.getSystemInfo({
success: function (res) {
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){
let _this = this;
this.$nextTick(function(){
let that = this;
uni.getSystemInfo({
success: function (res) {
that.$refs.videoRef.$el.style.width = "100%";
that.$refs.videoRef.$el.style.height = "220px";
that.$refs.videoRef.$el.style.position = "relative";
that.$refs.videoBox.$el.style.width = "100%";
that.$refs.videoBox.$el.style.height = "220px";
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;
}
});
});
}
},
// 判断是否是微信
isWechart() {
var rst = true;
if (
window.navigator.userAgent.match(
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
)
) {
var ua = navigator.userAgent.toLowerCase();
if (!(ua.match(/MicroMessenger/i) == 'micromessenger')) {
rst = false;
}
} else {
rst = false;
}
return rst;
},
GoRouter(){
uni.navigateTo({
url: '/pages/test/test'
});
}
},
}
</script>
<style>
.ComedyScreenBox{
z-index: 998;
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 20px;
padding:5px;
}
.ComedyScreen{
width: 100%;
height: 100%;
box-sizing: content-box;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAAXNSR0IArs4c6QAAAQRJREFUWAnt1d0NwiAQB/CmS7hHX5zFxLF0Ah2hE/lg7BT4PyMJUj6Oyt299BIioZT7ARYG59wLpTXmoXOMGO/QecxtwyWW4o42AupGALkFdX1MkHxE3Q7jIbQPqNthQogpJoZkMLRlsn/gFMQEk4OoY0oQVUwNoobhQFQwgMxUKFkt0C8+Zy61d8SeR5iHWCLOwF/MCb8Tp//ex3QFsE1HlCfKFUX2OijNFMnPKD7k76YcBoL402Zh8B77+MjlXrVvwfglXA32b0MrRgxCE2nBiEJaMOIQLkYFwsGoQWoYVUgJow4pYD4Weq4ayBqfwDYQmnUK0301kITujuawu65/l2B5A4z3Qe+Ut7EBAAAAAElFTkSuQmCC);
background-size: 50%;
background-position: 50% 50%;
background-repeat: no-repeat;
cursor: pointer;
position: absolute;
right: 0;
transform: rotate(90deg);
}
.ComedyReturn{
width: 100%;
height: 100%;
box-sizing: content-box;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAABBElEQVRYhcXWwQ3CMAwF0O+qOzAKQzAAl0pMxQQwQhmGKwcERxbgc4lEVdHUbm3zJR8qJemTo6YByS3JO8kjyQbGkHQpkOz4zcmK8YQ0BWDCkOxL+UDKombMYKwfZAkmDGLFhEIsmHCIFpMC0WDSIHOYVEgNkw6pYPIhE5j/QCoYF0g7eEkPYGej+cX82x/l6aIAIOb9CcrajrjFE/IAQGP1IgIRcYVsVs32+vx+nC9nWq6dAZDhOaPHBEDGh54O4w0pa9oxEZBFmCjIBGb6Qh4JMWGiIWpMBkSFyYLMYjIhNUw7N9GQi2aQiLxJHspjV+rl1hFrRp25uV2MRGQRBsAewPUD/HhJVOOuCzwAAAAASUVORK5CYII=);
background-size: 50%;
background-position: 50% 50%;
background-repeat: no-repeat;
cursor: pointer;
position: absolute;
right: 0;
transform: rotate(90deg);
}
#myVideo{
width:100%;
height:220px;
z-index: 99;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.transform{
transform: rotate(90deg);
width: 820px;
height: 517px;
}
.videoBox {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 220px;
z-index:99;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.boxbox{
position: absolute;
top: 220px;
}
</style>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
2020-05-26 轮询与长连接
2020-05-26 IOS 前端兼容,webapp常见问题