手机 html自动播放视频,video标签设置autoplay在手机浏览器无法自动播放视频的解决方案...

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

跟版网-视频自动播放

html, body {

width: 100%;

height: 100%;

}

.video-container {

width: 300px;

height: 600px;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

overflow: hidden;

margin: 0 auto;

}

#video {

display: block;

width: 100%;

}

#mask {

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.83);

position: absolute;

top: 0;

left: 0;

z-index: 2;

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

}

.pop-container {

width: 250px;

height: 200px;

background: white;

border-radius: 5px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

button {

width: 50px;

height: 30px;

border-radius: 4px;

}

页面内有自动播放视频 请注意流量

我知道了

function playVideo() {

document.getElementById('mask').style.display = 'none';

var video = document.querySelector('#video');

video.play();

}