<think>我们正在解决在uniapp中
使用vue-video-player时，
H5端全屏按钮不生效的问题。根据引用内容，我们可以得知在
微信内置
浏览器（尤其是Android的X
5内核）中，视频播放会被自动全屏，导致全屏按钮无法按预期工作。同时，引用[2]提供了针对X
5内核的解决方案，即设置视频元素的属性来启用同层
H5播放器。此外，引用[4]提到了一些注意事项，例如不能同时设置`x
5-video-player-type="
h5"`和`playsinline="true"`。
### 解决思路：
1
. **识别
浏览器环境**：根据用户代理（User Agent）判断是否为X
5内核（腾讯系
浏览器）或iOS的
微信内置
浏览器。
2
. **动态设置视频属性**：针对不同的
浏览器环境，设置相应的属性来启用同层播放（X
5内核）或内联播放（iOS）。
3
. **确保uniapp中正确获取视频元素**：在
vue-video-player组件渲染后，通过ref获取视频元素并设置属性。
### 具体步骤：
#### 步骤1：在uniapp项目中配置
vue-video-player
确保已正确安装和引入
vue-video-player，并配置好播放器选项。
#### 步骤2：在组件中监听播放器的`canplay`事件
在`canplay`事件触发时（此时视频已准备好播放），我们执行设置属性的操作。
#### 步骤3：动态设置视频属性
- **X
5内核（腾讯系
浏览器）**：设置`x
5-video-player-type`为`'
h5'`，这样视频播放时不会自动全屏，而是同层播放（可以在视频上方覆盖其他元素）。
- **iOS
微信浏览器**：设置`playsinline`和`webkit
-playsinline`为`true`，使视频在页面内播放而不自动全屏。
注意：根据引用[4]，不能同时设置`x
5-video-player-type="
h5"`和`playsinline="true"`，因此我们需要分别处理。
#### 代码示例：
```
vue
<template>
<view>
<
video-player
ref="
videoPlayer"
class="
video-player v
js-custom
-skin"
:options="
playerOptions"
@canplay="on
PlayerCanplay"
></
video-player>
</view>
</template>
<script>
import {
videoPlayer } from '
vue-video-player';
import '
video.js/dist/
video-js.css';
import '
vue-video-player/src/custom
-theme
.css';
export default {
components: {
videoPlayer },
data() {
return {
playerOptions: {
// 播放器配置，如播放源、封面等
sources: [{
type: "
video/mp4",
src: "https://example
.com/
video.mp4"
}],
poster: "https://example
.com/poster
.jpg",
// 其他配置
...
}
};
},
methods: {
on
PlayerCanplay(
player) {
// 注意：在uniapp的
H5环境中，需要获取到
video元素
// 由于
vue-video-player渲染后，
内部有一个
video元素，我们可以通过ref获取
// 但是注意，
vue-video-player的ref获取的是组件实例，我们需要通过其
player属性访问
video.js实例，再通过其el()方法获取
video元素
// 方法1：通过
vue-video-player的ref获取
video.js的
player对象，再获取
video元素
// 注意：在uniapp中，可能需要
使用nextTick确保DOM已渲染
this
.$nextTick(() => {
// 获取
video.js的
player对象
const
videojsPlayer = this
.$refs
.videoPlayer.player;
if (
videojsPlayer) {
// 获取
video元素
const
videoElement =
videojsPlayer.el();
if (
videoElement) {
const
videoTag =
videoElement
.querySelector('
video');
this
.set
VideoAttributes(
videoTag);
}
}
// 方法2：如果上述方法不行，可以尝试通过
标签名获取（注意：页面中可能有多个
video，确保获取正确）
// let
videoTags = document
.getElementsByTagName('
video');
// if (
videoTags
.length > 0) {
// this
.set
VideoAttributes(
videoTags[0]);
// }
});
},
set
VideoAttributes(
video) {
if (!
video) return;
const ua = navigator
.userAgent
.toLowerCase();
// 判断是否为X
5内核
if (ua
.match(/tencenttraveler/) != null || ua
.match(/qqbrowse/) != null) {
// 腾讯X
5内核
video.setAttribute('x
5-video-player-type', '
h5'); // 启用同层
H5播放器
video.setAttribute('x
5-video-orientation', 'landscape|portrait'); // 可以自动旋转
video.setAttribute('x
5-video-player-fullscreen', 'true'); // 全屏通知
} else if (ua
.match(/micromessenger/) != null) {
//
微信浏览器（非X
5内核可能是iOS）
// 设置iOS内联播放
video.setAttribute('webkit
-playsinline', 'true');
video.setAttribute('playsinline', 'true');
}
}
}
};
</script>
```
### 注意事项：
1
. **兼容性**：此方案主要解决
微信内置
浏览器（Android X
5内核和iOS）的问题。
2
. **测试**：在真机环境中测试，特别是Android和iOS的
微信浏览器。
3
. **全屏按钮**：设置上述属性后，全屏按钮应该可以正常工作。但是，在X
5内核中，全屏播放可能会有不同的表现（如播放器样式不同）。
4
. **引用[4]的注意点**：不要同时设置`x
5-video-player-type="
h5"`和`playsinline="true"`，所以我们在不同环境中分别设置。
### 可能遇到的问题及解决方案：
- **全屏按钮点击后无反应**：检查是否成功设置了属性，特别是在X
5内核中，需要确认`x
5-video-player-type="
h5"`是否设置成功。
- **iOS上设置内联播放无效**：确保在iOS的
微信中，设置了`webkit
-playsinline`和`playsinline`。
### 引用说明：
- 针对X
5内核的设置参考了引用[2]和引用[4]。
- 在iOS上的内联播放设置参考了引用[2]。
通过以上设置，应该能够解决uniapp中
使用vue-video-player在
H5端全屏按钮不生效的问题。
§§相关问题§§
1
. 如何判断
浏览器是否
使用了X
5内核？
2
. 在
微信浏览器中，如何实现视频播放时避免被自动全屏？
3
. uniapp中如何获取
video组件的上下文？
</think>在 uniapp 中
使用 vue-video-player 时遇到
H5 端全屏按钮不生效的问题，主要是由于
微信内置
浏览器（特别是 Android X
5 内核）的特殊视频播放机制造成的。以下是完整的解决方案，结合引用内容中的有效实践：
### 解决方案步骤
#### 1
. 识别
浏览器环境并动态设置属性
在 `canplay` 事件中检测用户
浏览器类型，针对不同环境设置对应属性：
```
vue
<script>
export default {
methods: {
on
PlayerCanplay(
player) {
const ua = navigator
.userAgent
.toLowerCase();
// Android/X
5内核处理
if (ua
.includes('micromessenger') || ua
.includes('tencent') || ua
.includes('qqbrowse')) {
const
video =
player.el()
.querySelector('
video');
// 启用同层
H5播放器 [^2]
video.setAttribute('x
5-video-player-type', '
h5');
video.setAttribute('x
5-video-orientation', 'portrait');
video.setAttribute('x
5-video-player-fullscreen', 'true');
}
// iOS处理
else if (ua
.includes('iphone') || ua
.includes('ipad')) {
const
video =
player.el()
.querySelector('
video');
video.setAttribute('webkit
-playsinline', 'true'); // iOS9
video.setAttribute('playsinline', 'true'); // iOS10+
}
}
}
}
</script>
```
#### 2
. 配置播放器选项
在
playerOptions 中添加关键配置：
```
js
playerOptions: {
techOrder: ["
html5"],
html5: {
nativeControlsForTouch: false, // 启用自定义控制条
hls: {
overrideNative: true
}
},
fluid: true, // 流体模式
playbackRates: [0
.5, 1, 1
.5, 2],
controls: true, // 启用控制条
controlBar: {
fullscreenToggle: true // 确保全屏按钮可见
}
}
```
#### 3
. 组件模板设置
```
vue
<template>
<
video-player
ref="
videoPlayer"
class="v
js-custom
-skin"
:options="
playerOptions"
@canplay="on
PlayerCanplay"
@fullscreenchange="onFullscreenChange"
></
video-player>
</template>
```
#### 4
. 处理全屏状态变化（关键）
```
js
methods: {
onFullscreenChange(isFullscreen) {
// 修复退出全屏报错问题 [^3]
if (!isFullscreen && this
.player) {
this
.player.exitFullscreen();
}
}
}
```
### 关键注意事项
1
. **X
5内核特殊处理**：
- 必须设置 `x
5-video-player-type="
h5"` 启用同层播放
- `x
5-video-orientation` 控制方向（portrait｜landscape）
- 不可与 `playsinline` 同时
使用 [^4]
2
. **uniapp 兼容问题**：
```
js
// 创建视频上下文时确保id唯一 [^3]
const
videoContext = uni
.create
VideoContext('unique
VideoId');
```
3
. **Android WebView 配置**：
在原生端需启用硬件加速（manifest
.xml）：
```xml
<activity android:hardwareAccelerated="true" /> [^
5]
```
### 效果验证方法
1
. 在
微信开发者工具中切换 "X
5内核" 进行测试
2
. 真机测试时
使用 `console
.log(navigator
.userAgent)` 确认内核
3
. 检查全屏按钮是否触发自定义控制条事件
> **重要提示**：此方案针对
微信浏览器X
5内核做了特殊处理，正常
浏览器无需额外配置。测试时需区分 Android/iOS 环境[^2][^4]。
通过以上配置，可解决 uniapp 中
vue-video-player 的
H5 全屏按钮失效问题，同时兼容
微信浏览器特殊播放逻辑。
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
1462
