用HTML打包APK制作视频播放器
HTML页面可以通过 video 标签播放网络和本地视频，结合浏览器全屏接口实现最大化播放，并在全屏时锁定横屏获得更好的观看体验。完成页面代码后，再通过HTML一键打包APK工具配置网络权限，即可生成支持视频播放和全屏播放的安卓APP。
工具官网：HTML一键打包APK工具官网
创建视频播放页面
在项目入口目录创建 index.html，包含视频播放区、最大化按钮和地址输入。
视频播放：使用
video标签加载视频，添加playsinline属性保证内联播放。最大化按钮：调用全屏接口，兼容WebView。
横屏锁定：全屏时自动横屏，退出竖屏。
地址加载：输入视频直链，切换测试视频。
视频标签需要添加 playsinline、webkit-playsinline 和 x5-playsinline 属性，避免跳转系统播放器：
<video playsinline webkit-playsinline x5-playsinline src="video.mp4"></video>
最大化按钮通过全屏接口处理标准接口和 webkit 前缀接口：
if (shell.requestFullscreen) shell.requestFullscreen(); else if (shell.webkitRequestFullscreen) shell.webkitRequestFullscreen();
打包成APK
保存代码到video-test.html，用工具载入并点击打包：
测试功能
安装APK后测试：
默认视频加载，播放暂停正常。
点最大化按钮进入全屏。
全屏时横屏锁定，退出恢复竖屏。
输入其他mp4链接，切换加载。
拖动进度条，从指定位置播放。
推荐H.264+AAC编码的mp4，避免HEVC等兼容问题。
如果全屏失效，检查系统横屏限制；视频加载失败，确认网络权限和地址可用。自动播放需要用户交互。
完整示例：
<!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> 扫描二维码推送至手机访问。
版权声明：本文由YLong软件发布，如需转载请注明出处。
本文链接：https://www.ylongsoft.com/post/html-apk-video-fullscreen-player.html
