解决微信h5页面视频播放问题实例

解决微信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下有待完善（解决播放即全屏的坑就完美了）

解决微信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下有待完善（解决播放即全屏的坑就完美了）

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！