2

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

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

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

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

#video div{
       opacity: 0;
}

#video div:hover {
       opacity: 0.6;
}

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

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

4

2 回答 2

4

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();
    }
);
于 2013-02-08T20:08:02.787 回答
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>
于 2013-02-08T20:01:35.940 回答