带有自定义播放按钮的视频上的文字答案

【问题标题】：Text over a video with custom play button带有自定义播放按钮的视频上的文字
【发布时间】：2021-01-06 11:28:43
【问题描述】：

我有一个包含视频的页面，并且它有一个用于移动设备的自定义播放按钮，因为没有移动设备支持视频自动播放。我使用 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>

【问题讨论】：

标签： html css video text

【解决方案1】：

只需在 <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>

【讨论】：