Question

我正在完成一项任务，我们必须使用HTML5创建一个包含三个视频的网站。这就是我现在所拥有的：http://jumpshare.com/v/hVQnbW?b=47ZPmk

我熟悉如何创建播放/暂停和视频播放器的其他功能。但是我不知道将控件放在视频上的最佳方法是什么。

我想创造像大多数玩家一样的东西;当控件显示在悬停时，中间有一个按钮可以在视频关闭时启动视频。

我最初的想法是我必须在视频标签中创建一个div标签（因此边框不会超出父标记（）。从那里有一个CSS规则：

#video div{
       opacity: 0;
}

#video div:hover {
       opacity: 0.6;
}

是没有意义的。它只是使导航不透明，如果我悬停它但我想要它，如果我悬停视频：/

这只是一个猜测和我最初的直觉，但说实话，我不知道实现这一目标的正确方法。

Answer 1

Working example on jsFiddle

这样的事情可以解决问题：

HTML：

<div class="video">
    <video width="640" height="360">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
        Your browser does not support the video tag.
    </video>

    <div class="controls">
        <span class="pause">pause</span>
    </div>
</div>

CSS：

.video {
    position: relative;
}
.controls {
    display: none;
    background: #000;
    opacity: .7;
    color: #fff;
    font-size: .9em;
    position: absolute;
    bottom: .9em;
    left: 0;
    line-height: 2em;
    z-index: 3;
}
.controls span {
    background: #222;
    padding: 1em 1em;
    cursor: pointer;
}

JavaScript的：

var $video = $(".video"),
    $controls = $video.find(".controls");

$video.hover(
    function () {
        $controls.fadeIn();
    },
    function () {
        $controls.fadeOut();
    }
);

Answer 2

您必须创建一个包装元素，它将包装视频元素和控件。

<div id="vid-container">
    <video src="video.mp4"></video>
    <div id="controls">... control stuff goes here ...</div>
</div>

<style>
    #vid-container {
        position: relative;
        width: 400px; // Make this the width of the video
    }

    // Place the controls to be at the bottom of the video, and on top, and invisible
    #controls {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 2;
        opacity: 0;
    }

    // Make the controls show when the video container is hovered
    #vid-container:hover #controls {
        opacity: 0.6;
    }
</style>

尝试在视频之上制作视频控件

2 个答案: