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

尝试使用伪类：在

之后

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

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

Answer 2

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

e.g。一个包含

图像的div

伪HTML

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

css（假设100px方形图像）

button {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 100px;
 height: 100px;
 margin: -50px 0 0 -50px;
 background: url(play.png) no-repeat;
}

您需要在按钮上添加一些javascript，以便在点击时播放视频

e.g。 jQuery的

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

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

2 个答案: