2

HTML5 を使用して 3 つのビデオを含むサイトを作成する必要があるという課題に取り組んでいます。これは私が今持っているものです: http://jumpshare.com/v/hVQnbW?b=47ZPmk

ビデオ プレーヤーの再生/一時停止およびその他の機能の作成方法に精通しています。ただし、ビデオにコントロールを配置する最善の方法はわかりません。

ほとんどのプレイヤーと同じように機能するものを作成したいと考えています。ホバーするとコントロールが表示され、オフのときにビデオを開始するためのボタンが中央にあります。

私の最初の考えは、video タグ内に 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 に答える