前端工程化开发短记：巡检结果怎么交接
2026/8/11 4:57:14
在HTML页面中，通过video标签可以播放网络和本地视频，结合浏览器全屏接口可以实现最大化播放，并在全屏时锁定横屏。完成页面后，使用HTML一键打包APK工具配置网络权限，即可生成安卓APP。
HTML一键打包APK工具官网
创建视频播放页面
在项目入口创建index.html，包含视频播放区、最大化按钮和地址输入。
- 视频播放：使用
video标签加载视频，添加playsinline属性保证内联播放。 - 最大化按钮：调用全屏接口，兼容WebView。
- 横屏锁定：全屏时自动横屏，退出竖屏。
- 地址加载：输入视频直链，切换测试视频。
视频标签需要添加playsinline、webkit-playsinline和x5-playsinline属性，避免在部分WebView中跳转系统播放器：
<videoplaysinlinewebkit-playsinlinex5-playsinlinesrc="video.mp4"></video>最大化按钮通过全屏接口处理标准接口和webkit前缀接口：
if(shell.requestFullscreen)shell.requestFullscreen();elseif(shell.webkitRequestFullscreen)shell.webkitRequestFullscreen();打包成APK
保存代码到video-test.html，用工具载入并点击打包：
测试功能
安装APK后测试：
- 默认视频加载，播放暂停正常。
- 点最大化按钮进入全屏。
- 全屏时横屏锁定，退出恢复竖屏。
- 输入其他mp4链接，切换加载。
- 拖动进度条，从指定位置播放。
推荐H.264+AAC编码的mp4，避免HEVC等兼容问题。
如果全屏失效，检查系统横屏限制；视频加载失败，确认网络权限和地址可用。自动播放需要用户交互，记得加播放按钮。
完整示例：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="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 12pxcalc(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><divid="player-wrap"><divid="video-box"><videoid="video"playsinlinewebkit-playsinlinex5-playsinlinepreload="metadata"src="./BigBuckBunny.mp4"></video><!-- 最大化按钮 --><buttonid="btn-fullscreen"aria-label="最大化"><svgid="icon-max"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"><pathd="M8 3H5a2 2 0 0 0-2 2v3"/><pathd="M16 3h3a2 2 0 0 1 2 2v3"/><pathd="M8 21H5a2 2 0 0 1-2-2v-3"/><pathd="M16 21h3a2 2 0 0 0 2-2v-3"/></svg><svgid="icon-min"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"style="display:none"><pathd="M8 3v3a2 2 0 0 1-2 2H3"/><pathd="M21 8h-3a2 2 0 0 1-2-2V3"/><pathd="M3 16h3a2 2 0 0 1 2 2v3"/><pathd="M16 21v-3a2 2 0 0 1 2-2h3"/></svg></button></div><divid="controls"><buttonid="btn-play">播放 / 暂停</button><divclass="url-row"><inputid="url-input"type="url"placeholder="输入视频地址 (mp4/m3u8直链)"><buttonid="btn-load">加载</button></div><divid="status">就绪</div></div></div><script>(function(){varwrap=document.getElementById('player-wrap');varvideo=document.getElementById('video');varbtnFs=document.getElementById('btn-fullscreen');varbtnPlay=document.getElementById('btn-play');varbtnLoad=document.getElementById('btn-load');varurlInput=document.getElementById('url-input');varstatus=document.getElementById('status');variconMax=document.getElementById('icon-max');variconMin=document.getElementById('icon-min');functionsetStatus(msg){status.textContent=msg;}functionisFullscreen(){return!!(document.fullscreenElement||document.webkitFullscreenElement||document.webkitCurrentFullScreenElement);}functionupdateIcon(){varfs=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();elseif(document.webkitExitFullscreen)document.webkitExitFullscreen();elseif(video.webkitExitFullscreen)video.webkitExitFullscreen();return;}if(wrap.requestFullscreen){wrap.requestFullscreen();}elseif(wrap.webkitRequestFullscreen){wrap.webkitRequestFullscreen();}elseif(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);});elsevideo.pause();});// 加载自定义地址btnLoad.addEventListener('click',function(){varurl=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(){varerr=video.error;setStatus('加载出错: '+(err?'code '+err.code:'未知错误'));});video.addEventListener('ended',function(){setStatus('播放结束');});})();</script></body></html>