如题：
仿抖音视频播放，h5端的项目，使用video标签播放视频，在小米手机浏览器中，只要一开始播放视频就会默认触发全屏，原来页面上的内容都被覆盖，华为手机的浏览器上运行就是正常的。
x5-video-player-type="h5"
附件1：是正在加载视频的效果
附件2：是视频加载完成后播放的效果
求大佬帮忙分析下，或者有碰到过类似的问题吗，谢谢了[花花]
l***@126.com
- 发布：2025-05-14 11:40
- 更新：2025-05-14 14:49
- 阅读：79
x5-video-player-type="h5"
<video width="320" height="240" controls
src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4">
</video>你用这个测试一下有没有问题，如果有的话，麻烦发个完整的可复现demo
l***@126.com (作者)
<template>
<view>
<!-- 视频详情 -->
<view class="video-page" style="overscroll-behavior: none;">
<swiper
class="swiper"
:vertical="true"
:autoplay="false"
:current="0"
:duration="200"
>
<block>
<swiper-item class="swiper-item">
<scroll-view
scroll-y
:refresher-enabled="true"
enable-passive
clip
refresher-background="transparent"
refresher-default-style="none"
style="width: 100%; height: 100vh"
>
<block>
<video
:src="videoSrc"
class="video-container"
id="mVideo"
:loop="true"
:muted="false"
:initial-time="0"
:controls="false"
:autoplay="true"
:show-fullscreen-btn="false"
:enable-progress-gesture="false"
:enable-play-gesture="true"
:show-play-btn="false"
:show-center-play-btn="false"
@click.stop="onClickVideo(0)"
@error="videoErrorCallback"
@ended="onEnded"
@timeupdate="onTimeUpdate"
@loadedmetadata="loadedmetadata"
@waiting="onWaiting"
></video>
</block>
<!-- 页面上的内容 -->
<view class="controls-box">
<!-- 头像和内容信息 -->
<view class="user-operation">
<view class="works-info">
<!-- 作者 -->
<view class="artist-box">
<view class="image-box">
<view class="profile-box">
<image class="profile-img" src="https://img2.baidu.com/it/u=1751445990,1827195622&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="aspectFill" />
</view>
</view>
<view class="name">测试</view>
<block>
<view class="follow">关注</view>
</block>
</view>
<!-- 主题内容 -->
<view class="nameText">
<view class="content-all">
测试内容
</view>
</view>
</view>
</view>
<!-- 评论点赞 -->
<view class="toolbar">
<view class="comment tool" >请输入内容</view>
<!-- 点赞 -->
<view class="tool">
点赞
<view class="count">99+</view>
</view>
<!-- 评论 -->
<view class="tool">
评论
<view class="count">99+</view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</template>
<script>
export default {
data () {
return {
videoSrc: ''
}
},
onLoad () {
// 模拟请求
setTimeout(() => {
this.videoSrc = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4'
}, 3000);
},
methods: {
/**
* 点击当前视频控件
*/
onClickVideo(e) {
console.log('点击当前视频控件');
},
//视频元数据加载完成时触发
loadedmetadata(e) {
},
// 播放进度变化时触发
onTimeUpdate(e) {
},
// 视频播放错误
async videoErrorCallback(ev) {
console.log('视频播放错误', ev);
},
//当播放到末尾时触发
onEnded(e) {
},
// 视频加载的监听事件（缓冲）
onWaiting(e) {
},
}
};
</script>
<style>
page {
position: relative;
}
.video-page {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #000;
}
/* 滑块 */
.swiper {
width: 100%;
height: 100%;
position: relative;
}
/* 单个视频模块 */
.swiper-item {
width: 100%;
height: 100%;
/* #ifdef MP-WEIXIN */
position: relative;
/* #endif */
}
/* 视频组件 */
.swiper-item .video-container {
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 1;
}
/* 页面内容 */
.swiper-item .controls-box {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: auto;
color: #fff;
z-index: 9;
background-color: rgba(128, 128, 128, 0.1);
}
/* 头像和内容信息 */
.swiper-item .controls-box .user-operation {
padding: 20rpx 30rpx;
display: flex;
justify-content: space-between;
}
.swiper-item .controls-box .user-operation .works-info {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.swiper-item .controls-box .user-operation .works-info .nameText {
width: 100%;
margin-top: 20rpx;
line-height: 36rpx;
display: flex;
}
.swiper-item .controls-box .user-operation .works-info .nameText .content-all {
line-height: 36rpx;
width: 100%;
word-break: break-all;
}
.swiper-item .controls-box .user-operation .works-info .artist-box {
display: flex;
align-items: center;
}
.swiper-item .controls-box .user-operation .works-info .artist-box .name {
max-width: 360rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.swiper-item .controls-box .user-operation .works-info .artist-box .image-box {
position: relative;
margin-right: 22rpx;
width: 78rpx;
height: 78rpx;
}
.swiper-item .controls-box .user-operation .works-info .artist-box .image-box .profile-box {
position: relative;
width: 78rpx;
height: 78rpx;
}
.swiper-item .controls-box .user-operation .works-info .artist-box .image-box .profile-img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.swiper-item .controls-box .user-operation .works-info .artist-box .follow {
background: #ed1a3b;
padding: 10rpx 30rpx;
border-radius: 100rpx;
margin-left: 32rpx;
}
/* 评论点赞 */
.swiper-item .controls-box .toolbar {
width: 100%;
height: 200rpx;
font-size: 28rpx;
background: #000000;
padding-right: 30rpx;
display: flex;
align-items: center;
justify-content: space-around;
}
.swiper-item .controls-box .toolbar .comment {
background: #3a3a3a;
color: #b4b4b4;
width: 302rpx;
height: 68rpx;
padding-left: 30rpx;
line-height: 68rpx;
border-radius: 100rpx;
}
.swiper-item .controls-box .toolbar .tool {
display: flex;
align-items: center;
}
.swiper-item .controls-box .toolbar .tool .count {
margin-left: 10rpx;
}
</style>
l***@126.com (作者)
感谢大佬，上边那个就是一个可运行的demo。我做的是是一个仿抖音短视频滑动的功能，在小米手机上只要视频一播放就自动全屏了，页面上的用户信息、评论、点赞等都被覆盖了，但是在ios和华为手机浏览器播放都是正常的，小米就有这个问题了
2025-05-14 14:47