如何使视频描述在点击时处于活动状态？

Posted 2023-05-09

【中文标题】如何使视频描述在点击时处于活动状态？

【英文标题】：How do I make video description active onclick?

【发布时间】：2016-01-11 19:13:42

【问题描述】：

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

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

           <iframe id="vid_frame4" class="active" src="https://www.youtube.com/embed/cEQeHCG70Bw?enablejsapi=1&version=3&playerapiid=ytplayer&rel=0" frameborder="0"   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/

任何帮助将不胜感激

【问题讨论】：

您希望状态在悬停时和视频播放时都处于活动状态，还是仅在视频播放时处于活动状态？

我希望悬停状态保持不变，但在播放该视频时，我希望文本保持金色

你也用 jQuery 标记了这个问题...你在这里面使用任何 jQuery 吗？如果您的站点不包含 jQuery 库，那么您将使用 javascript

我的网站使用的是 jquery 1.11.1

【参考方案1】：

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

关于您的 CSS，需要注意的一点是，您可以将 :hover 与父元素一起使用来设置子元素的样式。

对于我的示例，我将向您的 .vid-item 元素添加一个名为 .active-vid 的类，并向您的 HTML 添加一个 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 应设置为数组中元素的索引

【讨论】：

谢谢。现在唯一的问题是，当我点击第二个视频时，第一个视频仍然是金色的。对不起，我对 jquery 不是很熟悉。

@Dunshea 啊，是的，我这边有一个小错误。在设置新的之前，我从未删除过黄金类。看看编辑。你现在应该没事了。