脚本宝典收集整理的这篇文章主要介绍了html5教程-解决微信h5页面视频播放问题实例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <title>my video</title> <style> html,body { padding: 0; margin: 0; width: 100%; height: 100%; -webkit-user-select: none; user-select: none; overflow: hidden; } .videobox { width: 100%; height: 100%; display: flex; align-content: center; position: absolute; left: 0; top: -10%; overflow: hidden; } video{ height: 120%; } video::-webkit-media-controls-fullscreen-button { display: none; } video::-webkit-media-controls-play-button { background: red; } video::-webkit-media-controls-play-button {display: none} video::-webkit-media-controls-timeline {display: none} video::-webkit-media-controls-current-time-display{} video::-webkit-media-controls-time-remaining-display {} video::-webkit-media-controls-time-remaining-display {} video::-webkit-media-controls-mute-button {} video::-webkit-media-controls-toggle-closed-captions-button {} video::-webkit-media-controls-volume-slider {} video::-internal-media-controls-download-button { display:none; } video::-webkit-media-controls-enclosure { overflow:hidden; } video::-webkit-media-controls-panel { width: calc(100% + 30px); } </style> </head> <body> <p class="videobox"> <video id="mainvideo" src="aeqy264.mp4" autoplay width="100%" x5-playsinline="" webkit-playsinline="" preload="auto" ></video> </p> <script> </script> </body> </html> 亲测部分机型有效。没做测试更多数据，ios下有待完善（解决播放即全屏的坑就完美了）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <title>my video</title> <style> html,body { padding: 0; margin: 0; width: 100%; height: 100%; -webkit-user-select: none; user-select: none; overflow: hidden; } .videobox { width: 100%; height: 100%; display: flex; align-content: center; position: absolute; left: 0; top: -10%; overflow: hidden; } video{ height: 120%; } video::-webkit-media-controls-fullscreen-button { display: none; } video::-webkit-media-controls-play-button { background: red; } video::-webkit-media-controls-play-button {display: none} video::-webkit-media-controls-timeline {display: none} video::-webkit-media-controls-current-time-display{} video::-webkit-media-controls-time-remaining-display {} video::-webkit-media-controls-time-remaining-display {} video::-webkit-media-controls-mute-button {} video::-webkit-media-controls-toggle-closed-captions-button {} video::-webkit-media-controls-volume-slider {} video::-internal-media-controls-download-button { display:none; } video::-webkit-media-controls-enclosure { overflow:hidden; } video::-webkit-media-controls-panel { width: calc(100% + 30px); } </style> </head> <body> <p class="videobox"> <video id="mainvideo" src="aeqy264.mp4" autoplay width="100%" x5-playsinline="" webkit-playsinline="" preload="auto" ></video> </p> <script> </script> </body> </html> 亲测部分机型有效。没做测试更多数据，ios下有待完善（解决播放即全屏的坑就完美了）
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的html5教程-解决微信h5页面视频播放问题实例全部内容，希望文章能够帮你解决html5教程-解决微信h5页面视频播放问题实例所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。