如何使视频描述活动的点击？

Question

我有一堆视频，想知道如何在视频播放时激活描述？

我已经能够添加一个悬停状态，但它不会保持黄金时，该视频播放。

           <iframe id="vid_frame4" class="active" src="https://www.youtube.com/embed/cEQeHCG70Bw?enablejsapi=1&version=3&playerapiid=ytplayer&rel=0" frameborder="0" width="454" height="255" allowscriptaccess="always" allowfullscreen></iframe>


            <div class="vid-item" onClick="document.getElementById('vid_frame4').src='http://youtube.com/embed/cEQeHCG70Bw?enablejsapi=1&version=3&playerapiid=ytplayer&autoplay=1&rel=0&autohide=1'" allowscriptaccess="always">
              <div class="thumb"><img src="http://img.youtube.com/vi/cEQeHCG70Bw/2.jpg"></div>
              <div class="desc active" onClick=".addClass(active)">Directions for Use</div>
            </div>

            <div class="vid-item" onClick="document.getElementById('vid_frame4').src='http://youtube.com/embed/dPxKQ7uh6xg?enablejsapi=1&version=3&playerapiid=ytplayer&autoplay=1&rel=0&autohide=1'" allowscriptaccess="always">
              <div class="thumb"><img src="http://img.youtube.com/vi/dPxKQ7uh6xg/2.jpg"></div>
              <div class="desc">Cup Size Programming</div>
            </div>

   .vid-item {
        width: 212px;
        height: 119px;
        float: left;
        margin: 15px 30px 0px 0;
        padding: 0px;
    }

    .thumb {
        /*position: relative;*/
        overflow:hidden;
        height: 100px;
    }

    .thumb img {
        width: 100%;
        position: relative;
        top: -20px;
    }

    .vid-item .desc {
        color: #000000;
        margin-top:5px;
        height:30px;
        float:left;
        text-align:left;
    }

    .vid-item .desc:hover, .vid-item .desc:active {
        color: #c79b4c;
        margin-top:5px;
        height:30px;
        float:left;
        text-align:left;
    }

    .vid-item:hover {
        cursor: pointer;
    }

这是js小提琴：https://jsfiddle.net/designstreet1/awbyf1h5/

任何帮助都是非常感谢的。

Answer 1

由于您有使用jQuery的能力，我建议将所有脚本放在HTML之外，然后将其放入<script>标记或外部.js文件中。

对于您的CSS，有几件事要认识到，您可以使用:hover和父元素来样式子元素。

对于我的示例，我将向您的.active-vid元素添加一个名为.vid-item的类，并向您的.vid-item元素中添加一个data属性。

因此，您可以将CSS设置为：

.vid-item:hover .desc, .vid-item.active-vid .desc {
    color: gold;
}

对于HTML，去掉onclick属性并使用jQuery事件处理程序。我会像这样设置脚本：

var vidArray = ["http://youtube.com/Video1", "http://youtube.com/Video2"]

$(document).on('click', '.vid-item', function(){

    $('.active-vid').removeClass('active-vid'); //Removes the current gold class

    var index = $(this).data('vidIndex');
    $('#vid_frame4').attr('src', vidArray[index]);

    $(this).addClass('active-vid'); //Sets new gold class
});

您的HTML应该如下所示：

<div class="vid-item" data-vidIndex="0">
      <div class="thumb"><img src="http://img.youtube.com/vi/cEQeHCG70Bw/2.jpg"></div>
      <div class="desc">Directions for Use</div>
</div>

应该将data-vidIndex设置为数组中元素的索引。