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

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

content="width=device-width,initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

my video

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);

}

x5-playsinline="" webkit-playsinline="" preload="auto"

>

亲测部分机型有效。没做测试更多数据，ios下有待完善(解决播放即全屏的坑就完美了)