如何解决带有自定义播放按钮的视频文本
我有一个包含视频的页面，它有一个用于移动设备的自定义播放按钮，因为没有移动设备支持视频自动播放。我使用 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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
