解决微信h5页面视频播放问题实例
<!DOCTY PE ht ML > <html lang="en"> <head> < ;m eta charset="UTF-8"> <meta n am e="viewport" content="width=device-width,in IT ial -s cale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <title>my video</title> <style> html,body { padding: 0; m arg in: 0; width: 100%; h ei ght: 100%; - webkit - user-select : none; user-select: none; overflow: hidden; } .videobox { width: 100%; height: 100%; dis play : 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 -t imeline {display: none} video::-webkit-media-controls- current -time-display{} video::-webkit-media-controls-time-rem ai ning-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:: -i nternal-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="" PR eload="auto" ></video> </p> <script> </script> </body> </html> 亲测部分 机型 有效。没做测试更多数据，ios下有待完善（解决播放即全屏的坑就完美了）
解决微信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; mar gin : 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下有待完善（解决播放即全屏的坑就完美了）
觉得 可用，就经常来吧！ 欢迎评论哦！&nbs p; html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-解决微信h5页面视频播放问题实例 全部内容，希望文章能够帮你解决 html5教程-解决微信h5页面视频播放问题实例 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-解决微信h5页面视频播放问题实例的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did219332