Question

我目前正在尝试创建一个网站，其中缩略图网格被加载到页面中，当用户（在桌面上）悬停在选定的缩略图上时，在DIV的背景中播放一个小视频。 / p>

目前我的CSS看起来像这样：

.griditem {
    position: relative;
    background-color: #777;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    width: 50%;
    overflow: hidden;
    max-width: 690px;
    min-width: 360px;
}

.video {
    position: relative;
    margin-top: none;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none;
}

.overlay {

    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
}


.titles {
    display: table;
    width: 100%;
    height: 100%; /*important, forces to 100% height of parent*/
    opacity:0;
    -webkit-transition: opacity .5s ease;
    -moz-transition: opacity .25s ease;
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    text-decoration: none;

}


.titles p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 25px;
    font-family: helvetica;
}

.griditem:hover .titles {
    text-decoration: none;
    opacity:1;
}

.imgspacer {
    width:100%;
}

.griditem:hover .video {
    display: inline;
}

.griditem:hover .imgspacer {
    display: none;
}

和我的HTML

<div class="griditem" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/8/80/Aspect_ratio_-_16x9.svg); background-size:100% 100%;">
<div class="imgspacer"><img src="http://i.imgur.com/JnW9SPx.png" width="100%" alt="Spacer 16x9" /></div>
            <div class="video">
            <video id="video" preload="none" muted autoplay loop poster="http://media.w3.org/2010/05/sintel/poster.png" style="width:100%; height:100%">
          <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
          <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
          <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
          <p>Your browser does not support HTML5 Video!</p>
            </video>
              </div>
    <div class="overlay">
    <a href="http://www.google.com" class="titles">
     <p>BIG TEXT<br>
        small Title<p>
    </a>
   </div>
</div>

目前这似乎运作得很好，但我想知道当.griditem:hover是display:none时，是否可以让视频始终从开头开始（基本上重置）触发？

此外，我在视频DIV上使用了Private _numOfControls As Integer = 20 Private _variables As New Dictionary(Of String, String)(_numOfControls) Private Sub Setup() For i as integer = 1 To _numOfControls Dim cboName As String = "cbo" & i Dim cbo As New ComboBox() cbo.Name = cboName cbo.SelectedIndex = 0 ' Add cbo location according to your logic here container.Controls.Add(cbo) ' container - any control or form that hosts cbo _variables.Add(cboName, ">") AddHandler cbo.SelectedIndexChanged, AddressOf OnCboSelectedIndexChanged Next End Sub ' If you do this way, your control-related variable will have appropriate equality sign without need for iteration Private Sub OnCboSelectedIndexChanged (sender As Object, e As EventArgs) Dim cbo As ComboBox = CType(sender, ComboBox) myDict(cbo.Name) = If(cbo.SelectedIndex = 0, ">", "<") End Sub ' But if you do not want to do in the above^^ way, you can iterate dictionary Private Sub FromDictionaryToCbo() ' Here you can't use for-loop on dictionary because your dictionary will be mutating. So lets iterate keys For Each k As String In _variables.Keys.ToArray()) _variables(k) = If(CType(container.Find(k, True), ComboBox).SelectedIndex = 0, ">", "<") Next End Sub ' And iterating combo boxes would be something similar as another answer here ' But we use our naming convention to bypass other controls Private Sub FromCboToDictionary() Dim c As Control For i As Integer = 1 To < _numOfControls Dim key As String = "cbo" & i.ToString() 'We don't know, may be there some other combo boxes are there, so we use our naming convention instead of control type c = container.Find(key, True) If c IsNot Nothing Then _variables(key) = If(CType(c, ComboBox).SelectedIndex = 0, ">", "<") end If Next End Sub - 这是否意味着所有视频都在后台加载并且正在播放？＆＃39; - 在显示大量视频和数据使用时，我担心潜在的性能影响！有没有更好的方法呢？

这是一个指向这个小提琴的链接：http://jsfiddle.net/jameshenry/0wo79wva/1/

Answer 1

感谢@somethinghere和@Shikkediel以及以下Javascript的帮助

drawFrame

视频DIV背景：悬停

1 个答案: