Javascript 如何为我的整页视频制作播放按钮？

我在一个项目中使用fullpage.js，我被要求放置一个播放按钮以方便用户。所以我找到了一个可以使用的，但我不知道如何让它出现在我的视频中。不过，我确实在这里找到了一篇关于如何点击播放的文章。以下是我的视频部分：

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

下面是我的javascript：

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

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

    });
</script>

$（文档）.ready（函数（）{
$（“#全页”）。全页({
afterRender:函数（）{
//播放视频
$（'video'）.get（0.pause（）；
}
});
});

---

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

我认为您需要将按钮作为HTML元素添加到视频元素上。您的图像被设置为视频元素的背景

e、 g.具有图像的div

伪HTML

<div>
  <video>
  </video>
  <div id="play-button"></div>
</div>

然后，您需要向按钮添加一些javascript，以便在单击视频时告诉视频播放

e、 g.jQuery

$('#play-button').on('click', function(){
  $('video').get(0).play();
});

---

尝试使用伪类：after

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

这将显示视频顶部的图像

$('#play-button').on('click', function(){
  $('video').get(0).play();
});

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