uni-app picture-in-picture-mode 设置后 小窗跑到不可见区域 只能听见声音 看不见小窗
uni-app picture-in-picture-mode 设置后 小窗跑到不可见区域 只能听见声音 看不见小窗
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Mac | 13.6.7 | HBuilderX |
HBuilderX | 4.65 | |
第三方工具 | 1.06.2503281 | |
基础库 | 3.7.12 |
示例代码:
<template>
<video
id="courseVideo"
src="xxxx.mp4"
controls
picture-in-picture-mode="pictureInPictureMode"
picture-in-picture-show-progress="true"
picture-in-picture-init-position="right,0"
>
</video>
</template>
<script>
export default {
name: "VideoPlay",
data() {
return {
pictureInPictureMode: ["pop", "push"]
};
},
onLoad(options) {},
onReady() {},
onHide() {
console.log("页面隐藏");
},
onShow() {},
onUnload() {
console.log("页面卸载");
// 页面卸载时,小窗会根据配置自动处理
},
methods: {}
};
</script>
<style lang="scss" scoped>
video {
width: 300px;
height: 225px;
}
</style>
更多关于uni-app picture-in-picture-mode 设置后 小窗跑到不可见区域 只能听见声音 看不见小窗的实战教程也可以访问 https://www.itying.com/category-93-b0.html
hello , 请提供一下视频效果辅助判断问题,方式可以在评论区上传 zip
更多关于uni-app picture-in-picture-mode 设置后 小窗跑到不可见区域 只能听见声音 看不见小窗的实战教程也可以访问 https://www.itying.com/category-93-b0.html
麻烦看一下 zip已上传到评论区
辅助判断视频
为了展示效果特意将主视频放置底部方便看小窗的活动轨迹
回复 w***@163.com: 什么手机?其它位置也是这样吗?你是不是在这触发了左滑了?
回复 DCloud_UNI_yuhe: iphone 15 因为官网说的只有路由盏发生变化才会触发小窗 但是我自己写了个微信小程序原生的在真机上同样的操作也没有问题
回复 w***@163.com: 你发一下这个项目我看一下,另外你视频的效果是这段代码吗?我这里没这个效果,我这是 16
回复 DCloud_UNI_yuhe: 是这段代码 我也怀疑是我页面的问题 但是我放在其他页面也是这种效果
回复 DCloud_UNI_yuhe: offsetTop 为0 应该是这个导致的
回复 DCloud_UNI_yuhe: 我才想起来 我是用cil搭建的
这个offsetTop属性为0 但是用原生写的为22
这是一个关于uni-app中picture-in-picture模式下小窗位置异常的问题。根据你的描述和代码,我分析可能有以下几个原因:
-
picture-in-picture-init-position
设置的初始位置"right,0"可能导致小窗跑出屏幕可见区域。建议改为更保守的位置值,如"right,100"。 -
在Mac环境下,某些浏览器或HBuilderX内置预览可能对画中画模式支持不完全,建议:
- 使用真机调试
- 尝试不同浏览器测试
- 检查系统是否允许画中画权限
- 代码层面可以尝试:
pictureInPictureMode: ["pop"] // 先只保留一种模式测试