HTML页面可以通过 `video` 标签播放网络和本地视频，结合浏览器全屏接口实现最大化播放，并在全屏时锁定横屏获得更好的观看体验。完成页面代码后，再通过HTML一键打包APK工具配置网络权限，即可生成支持视频播放和全屏播放的安卓APP。

## 创建视频播放页面

在HTML项目入口目录中创建 `index.html`，页面包含视频播放区、最大化按钮和地址加载入口。

- 视频播放：使用 `video` 标签加载网络或本地视频，并添加 `playsinline` 系列属性保证在APP内联播放。
- 最大化按钮：调用浏览器全屏接口，将播放器切换到全屏状态，兼容打包后APP的WebView环境。
- 横屏锁定：进入全屏时自动锁定为横屏，退出全屏时恢复竖屏。
- 地址加载：支持输入视频直链地址，加载不同的视频进行测试。

视频标签需要添加 `playsinline`、`webkit-playsinline` 和 `x5-playsinline` 属性，避免在部分WebView中点击播放时强制跳转系统播放器：

```html
<video playsinline webkit-playsinline x5-playsinline src="video.mp4"></video>
```

最大化按钮通过全屏接口把播放器容器切换到全屏，并同时处理标准接口和 `webkit` 前缀接口，保证在打包后的WebView中正常工作：

```javascript
if (shell.requestFullscreen) shell.requestFullscreen();
else if (shell.webkitRequestFullscreen) shell.webkitRequestFullscreen();
```

## 打包成APK

复制上述HTML代码, 保存到video-test.html文件中, 然后HTML一键打包APK工具中载入该文件, 然后点击打包生成APP即可

![把html打包成apk](https://developer.qcloudimg.com/http-save/yehe-10280634/6b1991c919c92793a4bffbd5220ad806.png)

## 安装并测试功能

将生成的APK安装到安卓手机，依次测试页面中的各项功能：

1. 打开APP，确认默认视频可以正常加载，点击“播放 / 暂停”按钮可以控制播放。
2. 点击右上角的最大化按钮，确认播放器进入全屏状态，按钮图标切换为还原样式。
3. 在全屏状态下旋转手机，确认画面锁定为横屏；退出全屏后确认恢复竖屏显示。
4. 在地址栏中输入其他mp4直链地址并点击“加载”，确认可以切换播放不同的视频。
5. 拖动进度条，确认视频可以从指定位置继续播放。

为了获得最好的兼容性，视频建议使用H.264视频编码和AAC音频编码的mp4文件。部分WebView版本对HEVC、VP9等编码的支持不一致，可能出现只有声音没有画面的情况。

如果点击最大化按钮没有进入全屏，请先确认APP系统设置中没有限制横屏，并检查手机是否开启了方向锁定；如果在线视频一直无法加载，请检查打包时是否勾选了网络权限，以及视频地址是否可以通过手机浏览器直接打开。网页中的自动播放在WebView里通常需要先有一次用户交互，因此建议像示例一样提供明确的播放按钮，而不是依赖页面打开后自动播放。

![视频播放和最大化页面](https://developer.qcloudimg.com/http-save/yehe-10280634/4529194d3a20e19da905dade4ebdf7ad.png)

一个完整的html示例代码如下：

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>视频播放测试</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    width: 100%; height: 100%;
    background: #000;
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    overflow: hidden;
  }

  #player-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* 视频区域 */
  #video-box {
    position: relative;
    flex: 1;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
  }

  /* 最大化按钮（悬浮在视频右上角） */
  #btn-fullscreen {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #btn-fullscreen:active { background: rgba(255, 255, 255, 0.25); }
  #btn-fullscreen svg { width: 24px; height: 24px; }

  /* 底部控制栏 */
  #controls {
    position: relative;
    z-index: 10;
    background: #111;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #btn-play {
    width: 100%;
    padding: 14px;
    font-size: 17px;
    color: #fff;
    background: #1f80ff;
    border: none;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
  }
  #btn-play:active { opacity: 0.8; }

  .url-row { display: flex; gap: 8px; }
  #url-input {
    flex: 1;
    min-width: 0;
    padding: 12px;
    font-size: 14px;
    color: #fff;
    background: #222;
    border: 1px solid #333;
    border-radius: 8px;
    outline: none;
  }
  #btn-load {
    padding: 0 16px;
    font-size: 14px;
    color: #fff;
    background: #333;
    border: none;
    border-radius: 8px;
    white-space: nowrap;
  }

  #status {
    font-size: 12px;
    color: #888;
    word-break: break-all;
  }

  /* 全屏时隐藏控制栏 */
  :fullscreen #controls { display: none; }
  :-webkit-full-screen #controls { display: none; }
</style>
</head>
<body>

<div id="player-wrap">
  <div id="video-box">
    <video id="video" playsinline webkit-playsinline x5-playsinline preload="metadata"
      src="./BigBuckBunny.mp4"></video>

    
    <button id="btn-fullscreen" aria-label="最大化">
      <svg id="icon-max" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M16 3h3a2 2 0 0 1 2 2v3"/>
        <path d="M8 21H5a2 2 0 0 1-2-2v-3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/>
      </svg>
      <svg id="icon-min" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none">
        <path d="M8 3v3a2 2 0 0 1-2 2H3"/><path d="M21 8h-3a2 2 0 0 1-2-2V3"/>
        <path d="M3 16h3a2 2 0 0 1 2 2v3"/><path d="M16 21v-3a2 2 0 0 1 2-2h3"/>
      </svg>
    </button>
  </div>

  <div id="controls">
    <button id="btn-play">播放 / 暂停</button>
    <div class="url-row">
      <input id="url-input" type="url" placeholder="输入视频地址 (mp4/m3u8直链)">
      <button id="btn-load">加载</button>
    </div>
    <div id="status">就绪</div>
  </div>
</div>

<script>
(function () {
  var wrap = document.getElementById('player-wrap');
  var video = document.getElementById('video');
  var btnFs = document.getElementById('btn-fullscreen');
  var btnPlay = document.getElementById('btn-play');
  var btnLoad = document.getElementById('btn-load');
  var urlInput = document.getElementById('url-input');
  var status = document.getElementById('status');
  var iconMax = document.getElementById('icon-max');
  var iconMin = document.getElementById('icon-min');

  function setStatus(msg) { status.textContent = msg; }

  function isFullscreen() {
    return !!(document.fullscreenElement || document.webkitFullscreenElement ||
              document.webkitCurrentFullScreenElement);
  }

  function updateIcon() {
    var fs = isFullscreen();
    iconMax.style.display = fs ? 'none' : '';
    iconMin.style.display = fs ? '' : 'none';
  }

  // 最大化 / 退出全屏（兼容 iOS Safari 的 video 原生全屏）
  btnFs.addEventListener('click', function () {
    if (isFullscreen()) {
      if (document.exitFullscreen) document.exitFullscreen();
      else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
      else if (video.webkitExitFullscreen) video.webkitExitFullscreen();
      return;
    }
    if (wrap.requestFullscreen) {
      wrap.requestFullscreen();
    } else if (wrap.webkitRequestFullscreen) {
      wrap.webkitRequestFullscreen();
    } else if (video.webkitEnterFullscreen) {
      // iOS Safari: 只对 video 元素有效
      video.webkitEnterFullscreen();
    } else {
      setStatus('当前环境不支持全屏 API');
    }
  });

  ['fullscreenchange', 'webkitfullscreenchange'].forEach(function (ev) {
    document.addEventListener(ev, updateIcon);
  });
  video.addEventListener('webkitendfullscreen', updateIcon);

  // 播放 / 暂停
  btnPlay.addEventListener('click', function () {
    if (video.paused) video.play().catch(function (e) { setStatus('播放失败: ' + e.message); });
    else video.pause();
  });

  // 加载自定义地址
  btnLoad.addEventListener('click', function () {
    var url = urlInput.value.trim();
    if (!url) { setStatus('请输入视频地址'); return; }
    video.src = url;
    video.load();
    video.play().catch(function () {});
    setStatus('已加载: ' + url);
  });

  // 状态反馈
  video.addEventListener('playing', function () { setStatus('播放中 ' + video.videoWidth + 'x' + video.videoHeight); });
  video.addEventListener('pause', function () { setStatus('已暂停'); });
  video.addEventListener('error', function () {
    var err = video.error;
    setStatus('加载出错: ' + (err ? 'code ' + err.code : '未知错误'));
  });
  video.addEventListener('ended', function () { setStatus('播放结束'); });
})();
</script>
</body>
</html>
```

HTML页面可以通过 video 标签播放网络和本地视频，结合浏览器全屏接口实现最大化播放，并在全屏时锁定横屏获得更好的观看体验。完成页面代码后，再通过HTML一键打包APK工具配置网络权限，即可生成支持视频播放和全屏播放的安卓APP。

HTML打包APK实现视频全屏播放方法

本文记录如何用HTML创建支持在线播放、全屏和横屏锁定的视频页面，再通过打包工具生成安卓APK。

人工智能

本文介绍如何用HTML5 video标签创建支持全屏播放和横屏锁定的视频播放器，并打包为安卓APK。涵盖播放器页面设计、全屏API调用、横屏切换、视频地址加载及常见问题处理，提供完整代码示例，确保在WebView中流畅播放H.264编码的MP4视频。

2026上云采购 | AI焕新·智启新局

ivld

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

HTML打包APK实现视频全屏播放方法-腾讯云开发者社区-腾讯云

HTML打包APK实现视频全屏播放方法

HTML打包APK实现视频全屏播放方法

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐