HTML打包APK实现视频全屏播放教程
HTML页面可以通过 video 标签播放网络和本地视频，结合浏览器全屏接口实现最大化播放，并在全屏时锁定横屏获得更好的观看体验。完成页面代码后，再通过HTML一键打包APK工具配置网络权限，即可生成支持视频播放和全屏播放的安卓APP。
如果你不了解HTML打包APK工具，可以访问官网查看详情：
创建视频播放页面
在HTML项目入口目录中创建 index.html，页面包含视频播放区、最大化按钮和地址加载入口。
视频播放：使用
video标签加载网络或本地视频，并添加playsinline系列属性保证在APP内联播放。最大化按钮：调用浏览器全屏接口，将播放器切换到全屏状态，兼容打包后APP的WebView环境。
横屏锁定：进入全屏时自动锁定为横屏，退出全屏时恢复竖屏。
地址加载：支持输入视频直链地址，加载不同的视频进行测试。
视频标签需要添加 playsinline、webkit-playsinline 和 x5-playsinline 属性，避免在部分WebView中点击播放时强制跳转系统播放器：
<video playsinline webkit-playsinline x5-playsinline src="video.mp4"></video>
最大化按钮通过全屏接口把播放器容器切换到全屏，并同时处理标准接口和 webkit 前缀接口，保证在打包后的WebView中正常工作：
if (shell.requestFullscreen) shell.requestFullscreen(); else if (shell.webkitRequestFullscreen) shell.webkitRequestFullscreen();
打包成APK
复制上述HTML代码, 保存到video-test.html文件中, 然后HTML一键打包APK工具中载入该文件, 然后点击打包生成APP即可
安装并测试功能
将生成的APK安装到安卓手机，依次测试页面中的各项功能：
打开APP，确认默认视频可以正常加载，点击“播放 / 暂停”按钮可以控制播放。
点击右上角的最大化按钮，确认播放器进入全屏状态，按钮图标切换为还原样式。
在全屏状态下旋转手机，确认画面锁定为横屏；退出全屏后确认恢复竖屏显示。
在地址栏中输入其他mp4直链地址并点击“加载”，确认可以切换播放不同的视频。
拖动进度条，确认视频可以从指定位置继续播放。
为了获得最好的兼容性，视频建议使用H.264视频编码和AAC音频编码的mp4文件。部分WebView版本对HEVC、VP9等编码的支持不一致，可能出现只有声音没有画面的情况。
如果点击最大化按钮没有进入全屏，请先确认APP系统设置中没有限制横屏，并检查手机是否开启了方向锁定；如果在线视频一直无法加载，请检查打包时是否勾选了网络权限，以及视频地址是否可以通过手机浏览器直接打开。网页中的自动播放在WebView里通常需要先有一次用户交互，因此建议像示例一样提供明确的播放按钮，而不是依赖页面打开后自动播放。
一个完整的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> 扫描二维码推送至手机访问。
版权声明：本文由H5开发工具网站发布，如需转载请注明出处。
如您需要下载软件, 可以点击进入官方软件网址。
本文链接：https://www.h5pack.com/post/html-apk-video-fullscreen-player.html
