Javascript 尝试在视频的顶部创建视频控件

我正在做一个作业，我们必须用HTML5创建一个包含三个视频的网站。 这就是我现在所拥有的：

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

我想创造一些像大多数玩家一样的东西；当控制出现在悬停状态时，中间有一个按钮，在关闭时启动视频。 我最初的想法是，我必须在视频标签中创建一个div标签（这样边框就不会超出父项（）。从那里我有一个CSS规则：

#video div{
       opacity: 0;
}

#video div:hover {
       opacity: 0.6;
}

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

---

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

您必须创建一个包装元素来包装视频元素和控件

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

…这里有控制装置。。。
#视频容器{
位置：相对位置；
宽度：400px；//将此设置为视频的宽度
}
//将控件放置在视频底部、顶部和不可见位置
#控制{
位置：绝对位置；
左：0；
底部：0；
z指数：2；
不透明度：0；
}
//使控件在视频容器悬停时显示
#vid容器：悬停#控件{
不透明度：0.6；
}

像这样的事情应该可以做到：

HTML:

JavaScript:

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

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

---

您可以将控件div设置为与播放器相同的大小（因此在任何位置悬停都会改变不透明度），或者跟踪鼠标悬停事件（jQuery）在video元素上以编程方式触发控件的可见性，如果包含是灵活的。我如何使控件随着视频大小的调整而调整。例如，我的站点的视频将随着窗口的缩小而变小。但是当前的规则保持控件的大小相同。您可以使用JavaScript保持其形状。When我在我的桌面上，我将更新答案，给出一个简短的JavaScript代码片段，可以帮助您完成这一任务。相反，您可以将视频宽度设置为100%，并在窗口调整大小时调整容器的宽度。视频将始终取容器的宽度，而容器将取视频的高度。我想我已经准备好了控件是用flex设计的。除了进度条。大小是用Javascript设置的，我不知道如何使用Javascript进行调整。这就是我到目前为止所拥有的：除了我上面提到的。我在回放方面仍然有一些问题（在找到视频后选择播放）我几乎100%确信这两个问题都与currentTime属性有关，而我根本无法使用它。

.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;
}

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

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