在HTML页面中通过video标签可以播放网络和本地视频结合浏览器全屏接口可以实现最大化播放并在全屏时锁定横屏。完成页面后使用HTML一键打包APK工具配置网络权限即可生成安卓APP。HTML一键打包APK工具官网创建视频播放页面在项目入口创建index.html包含视频播放区、最大化按钮和地址输入。视频播放使用video标签加载视频添加playsinline属性保证内联播放。最大化按钮调用全屏接口兼容WebView。横屏锁定全屏时自动横屏退出竖屏。地址加载输入视频直链切换测试视频。视频标签需要添加playsinline、webkit-playsinline和x5-playsinline属性避免在部分WebView中跳转系统播放器videoplaysinlinewebkit-playsinlinex5-playsinlinesrcvideo.mp4/video最大化按钮通过全屏接口处理标准接口和webkit前缀接口if(shell.requestFullscreen)shell.requestFullscreen();elseif(shell.webkitRequestFullscreen)shell.webkitRequestFullscreen();打包成APK保存代码到video-test.html用工具载入并点击打包测试功能安装APK后测试默认视频加载播放暂停正常。点最大化按钮进入全屏。全屏时横屏锁定退出恢复竖屏。输入其他mp4链接切换加载。拖动进度条从指定位置播放。推荐H.264AAC编码的mp4避免HEVC等兼容问题。如果全屏失效检查系统横屏限制视频加载失败确认网络权限和地址可用。自动播放需要用户交互记得加播放按钮。完整示例!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalablenotitle视频播放测试/titlestyle*{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/headbodydividplayer-wrapdividvideo-boxvideoidvideoplaysinlinewebkit-playsinlinex5-playsinlinepreloadmetadatasrc./BigBuckBunny.mp4/video!-- 最大化按钮 --buttonidbtn-fullscreenaria-label最大化svgidicon-maxviewBox0 0 24 24fillnonestrokecurrentColorstroke-width2stroke-linecaproundstroke-linejoinroundpathdM8 3H5a2 2 0 0 0-2 2v3/pathdM16 3h3a2 2 0 0 1 2 2v3/pathdM8 21H5a2 2 0 0 1-2-2v-3/pathdM16 21h3a2 2 0 0 0 2-2v-3//svgsvgidicon-minviewBox0 0 24 24fillnonestrokecurrentColorstroke-width2stroke-linecaproundstroke-linejoinroundstyledisplay:nonepathdM8 3v3a2 2 0 0 1-2 2H3/pathdM21 8h-3a2 2 0 0 1-2-2V3/pathdM3 16h3a2 2 0 0 1 2 2v3/pathdM16 21v-3a2 2 0 0 1 2-2h3//svg/button/divdividcontrolsbuttonidbtn-play播放 / 暂停/buttondivclassurl-rowinputidurl-inputtypeurlplaceholder输入视频地址 (mp4/m3u8直链)buttonidbtn-load加载/button/divdividstatus就绪/div/div/divscript(function(){varwrapdocument.getElementById(player-wrap);varvideodocument.getElementById(video);varbtnFsdocument.getElementById(btn-fullscreen);varbtnPlaydocument.getElementById(btn-play);varbtnLoaddocument.getElementById(btn-load);varurlInputdocument.getElementById(url-input);varstatusdocument.getElementById(status);variconMaxdocument.getElementById(icon-max);variconMindocument.getElementById(icon-min);functionsetStatus(msg){status.textContentmsg;}functionisFullscreen(){return!!(document.fullscreenElement||document.webkitFullscreenElement||document.webkitCurrentFullScreenElement);}functionupdateIcon(){varfsisFullscreen();iconMax.style.displayfs?none:;iconMin.style.displayfs?: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(){varurlurlInput.value.trim();if(!url){setStatus(请输入视频地址);return;}video.srcurl;video.load();video.play().catch(function(){});setStatus(已加载: url);});// 状态反馈video.addEventListener(playing,function(){setStatus(播放中 video.videoWidthxvideo.videoHeight);});video.addEventListener(pause,function(){setStatus(已暂停);});video.addEventListener(error,function(){varerrvideo.error;setStatus(加载出错: (err?code err.code:未知错误));});video.addEventListener(ended,function(){setStatus(播放结束);});})();/script/body/html