試圖製作視頻的視頻控制ontop

我正在做一項任務，我們必須使用HTML5創建一個包含三個視頻的網站。這是我現在所擁有的：http://jumpshare.com/v/hVQnbW?b=47ZPmk 試圖製作視頻的視頻控制ontop

我熟悉如何創建視頻播放器的播放/暫停和其他功能。但是我不知道最好的方法是在視頻上使用控件。

我想創造的東西，就像大多數球員;控制器在懸停時顯示，中間有一個按鈕用於在視頻關閉時啓動視頻。

我最初的想法是，我不得不創建視頻標籤內的div標籤（這樣的邊界不父（外面去），從那裏有一個CSS規則：

#video div{ 
     opacity: 0; 
} 

#video div:hover { 
     opacity: 0.6; 
}

這是沒有道理的，它只是讓導航不透明，如果我徘徊它，但我想它，如果我徘徊視頻：/

這只是一個猜測和我的初始直覺，但老實說，我不知道正確的方法來做到這一點。

來源

2013-02-08 Batman

你既可以使控制div的，與玩家相同的大小 - 如此懸停在任何地方都會改變不透明度 - 或者跟蹤視頻元素上的鼠標懸停事件（jQuery），以編程方式觸發控件的可見性 – Offbeatmammal 2013-02-08 19:59:39

你必須創建一個包裝元素的Wi將包裝視頻元素和控件。

<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-08 20:01:35 Kizer

這似乎工作。謝謝。 – Batman 2013-02-08 20:33:07

如果包含物是靈活的，該怎麼辦？隨着視頻尺寸的調整，我會如何調整控件。例如，隨着窗口縮小，我網站的視頻會變小。但目前的規則保持控制相同的大小。 – Batman 2013-02-08 21:08:06

你可以使用JavaScript來保持它的形狀。當我在我的桌面上時，我會更新答案，給出一個簡短的JavaScript代碼片段，可以幫助您實現這一點。 – Kizer 2013-02-09 07:54:56

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(); 
    } 
);

來源

2013-02-08 20:08:02

試圖製作視頻的視頻控制ontop

回答

相關問題