使用自定义播放按钮在视频上添加文字

Question

我有一个包含视频的页面，它有一个用于移动设备的自定义播放按钮，因为没有移动设备支持视频自动播放。我使用 gif 作为自定义播放按钮。现在要做的就是在 gif 顶部添加文字“单击 gif 开始”，仅限移动设备。我尝试了几种方法，但 none 有所帮助。有人请帮忙！

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>

Answer 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>

使用自定义播放按钮在视频上添加文字

Text over a video with custom play button

html

css

video

text