uniapp嵌入H5播放器实现横屏控制，可通过web-view组件加载H5页面，结合uni全屏API实现，在H5播放器中监听全屏事件，触发时调用uni.enterFullScreen({direction: 'landscape'})进入横屏模式，同时监听屏幕旋转事件，调整播放器布局适配横屏显示，需注意iOS与Android平台全屏API差异，可通过条件判断兼容，播放器自身需配置全屏按钮，点击时触发JS事件与uniapp交互，实现横屏切换，确保用户操作流畅，视频播放不受方向影响。
Uniapp 中嵌入 H5 播放器并实现横屏控制详解
在移动端应用开发中,视频播放是常见需求，Uniapp 作为跨端开发框架，支持将 H5 播放器无缝嵌入应用，并通过代码精准控制横屏/竖屏切换，显著提升用户体验，本文将系统介绍在 Uniapp 项目中嵌入 H5 播放器的完整流程，重点解析横屏控制的核心实现方案，涵盖核心代码、跨端兼容策略及常见问题解决方案。
核心需求与技术方案
需求场景
在 Uniapp 应用中集成 H5 视频播放器（如原生 `
- 默认竖屏播放,适配移动端常规使用场景；
- 点击播放器或全屏按钮时,自动切换至横屏模式；
- 横屏状态下支持手势旋转返回竖屏；
- 横竖屏切换时保持播放状态连续,避免中断。
技术方案
- H5 播放器嵌入： - 方案一：直接在 Uniapp 页面使用原生 `
- 横屏控制： - 利用 Uniapp 屏幕方向 API（`uni.setScreenOrientation`）动态切换横竖屏； - 通过 H5 与 Uniapp 原生通信机制（`uni.postMessage`）实现双向交互逻辑。
环境准备与基础配置
项目创建
使用 HBuilderX 创建 Uniapp 项目（选择“默认模板”），确保启用跨端支持： 勾选 **“使用 uni-app 编译模式”** 以兼容 iOS/Android 平台差异。
屏幕方向配置
在 `pages.json` 中配置页面初始方向，默认为竖屏（`portrait`）：
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "视频播放",
"pageOrientation": "portrait" // 运行时可通过 API 动态修改
}
}
]
}
注意：`pageOrientation` 仅控制初始方向，运行时需结合 API 动态调整。
嵌入 H5 播放器的两种实现方式
直接使用 `
适用于简单播放场景,但需注意 iOS 平台的自动播放限制：
<template>
<view class="container">
<video
id="myVideo"
src="https://example.com/video.mp4"
controls
@fullscreenchange="handleFullscreenChange"
style="width: 100%; height: 300px;"
></video>
</view>
</template>
<script>
export default {
methods: {
handleFullscreenChange(e) {
// 通过 e.detail.isFullscreen 判断全屏状态
if (e.detail.isFullscreen) {
uni.setScreenOrientation('landscape'); // 切换为横屏
} else {
uni.setScreenOrientation('portrait'); // 切换为竖屏
}
}
}
}
</script>
通过 `` 加载 H5 播放器（灵活扩展方案）
适合需要自定义控制栏、广告插播等复杂功能的场景。 在 `static` 目录下创建 `player.html`（或部署至独立域名）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>视频播放器</title>
<style>
body { margin: 0; overflow: hidden; }
video { width: 100%; height: 100vh; object-fit: contain; }
</style>
</head>
<body>
<video id="videoPlayer" src="https://example.com/video.mp4" controls></video>
<script>
const video = document.getElementById('videoPlayer');
// 监听全屏变化，通知 Uniapp 切换屏幕方向
video.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
uni.postMessage({
data: { type: 'fullscreen', status: true }
});
} else {
uni.postMessage({
data: { type: 'fullscreen', status: false }
});
}
});
// 监听 Uniapp 发送的指令（如退出横屏）
window.addEventListener('message', (event) => {
if (event.data.type === 'exitFullscreen') {
document.exitFullscreen();
}
});
</script>
</body>
</html>
在 Uniapp 页面中加载 H5 播放器：
<template>
<view class="container">
<web-view :src="webviewSrc" @message="handleWebviewMessage"></web-view>
</view>
</template>
<script>
export default {
data() {
