我有一个带有视频的页面，它有一个用于移动设备的自定义播放按钮，因为没有移动设备支持视频自动播放。我使用了gif作为自定义播放按钮。现在所有想要做的就是添加文字，上面写着"单击gif开始"；在gif的顶部，仅在移动设备上。我试过几种方法，但都无济于事。有人请帮忙！
document.getElementById('myVideo').addEventListener('ended', function() {
window.location.href = 'http://www.vvvv.com/index_home.html';
}, false);
$('.video').parent().click(function() {
if ($(this).children(".video").get(0).paused) {
$(this).children(".video").get(0).play();
$(this).children(".playpause").fadeOut();
} else {
$(this).children(".video").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});@media only screen and (max-width: 1000px){
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 110%;
overflow-y: hidden;
overflow: hidden;
}
.wrapper{
display:table;
width:auto;
position:relative;
}
.playpause {
background-color: white;
background-image:url("https://cdn3.iconfinder.com/data/icons/iconic-1/32/play_alt-512.png");
background-repeat:no-repeat;
width:100%;
height:110%;
position:absolute;
left:0%;
right:0%;
top:0%;
bottom:0%;
margin:auto;
background-size:contain;
background-position: center;
}
}
@media only screen and (min-width: 1021px) and (max-width : 2700px){
body {
height: 100%;
overflow-y: hidden;
}
.video {
object-fit: cover;
width: 100%;
border: 1px solid black;
}
.wrapper{
width:100%;
height:100%;
}
}<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<video class="video" id="myVideo" autoplay="autoplay" controls="controls">
<source src="intro.mp4" />
</video>
<div class="playpause"></div>
</div>
</body>只需在<div class="playpause"></div>中添加文本，并在css上进行一些编辑，如margin、text-align: center，它将是完美的。
document.getElementById('myVideo').addEventListener('ended', function() {
window.location.href = 'http://www.vvvv.com/index_home.html';
}, false);
$('.video').parent().click(function() {
if ($(this).children(".video").get(0).paused) {
$(this).children(".video").get(0).play();
$(this).children(".playpause").fadeOut();
} else {
$(this).children(".video").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});@media only screen and (max-width: 1000px){
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 110%;
overflow-y: hidden;
overflow: hidden;
}
.wrapper{
display:table;
width:auto;
position:relative;
}
.playpause {
background-image: url(https://cdn3.iconfinder.com/data/icons/iconic-1/32/play_alt-512.png);
background-repeat: no-repeat;
width: 100%;
height: 110%;
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;
text-align: center;
margin: auto;
color: #fff;
margin-top: 5px;
background-size: 80px;
background-position: center 30px;
}
}
@media only screen and (min-width: 1021px) and (max-width : 2700px){
body {
height: 100%;
overflow-y: hidden;
}
.video {
object-fit: cover;
width: 100%;
border: 1px solid black;
}
.wrapper{
width:100%;
height:100%;
}
}<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<video class="video" id="myVideo" autoplay="autoplay" controls="controls">
<source src="intro.mp4" />
</video>
<div class="playpause">Click here to play</div>
</div>
</body>