javascript - 如何为整页视频制作播放按钮？

Question

我在一个元素中使用 fullpage.js，为了用户友好，我被要求放置一个播放按钮。所以我找到了一个 nice button使用但无法弄清楚如何让它出现在我的视频中。不过，我确实在这里找到了一篇关于如何点击播放的文章。这是我的视频部分:

<div class="section" id="section2">
    <div id="container">
    <video controls id="myVideo" preload controls>
        <source src="myvideo.mp4" type="video/mp4">
        <source src="myvideo.webm" type="video/webm">
    </video>
    <div class="layer" style="text-align:center;">          
    </div>
</div>

这是我正在使用的 CSS:

#myVideo
    {
        position: absolute;
        right: 0;
        bottom: 0;
        top:0;
        right:0;
        width: 100%;
        height: 100%;
        z-index: 10;
        background-size: 100% 100%;
        background-color: black; 
        background-image: url('images/play.png'); /* does not show */
        background-position: center center;
        background-size: contain;
        object-fit: cover; 
    }

这是我的 javascript:

<script type="text/javascript">
    $(document).ready(function () {
        $('#fullpage').fullpage({

            afterRender: function () {
                //playing the video
                $('video').get(0).pause();
            }
        });

    });
</script>

为了澄清，我的 HTML5 控件显示了，但奶奶和爷爷需要一个大的播放按钮来帮助他们。

Answer 1

尝试使用伪类 :after

.section:after {
        position:absolute;
        z-index:99;
        content: url('http://www.clker.com/cliparts/K/7/2/z/b/U/media-hi.png');
}

这应该会在视频顶部显示图像。