Question

我有一个页面，其中有视频缩略图（图像），当点击它们时，视频会播放更大的div。我将它们设置为悬停在等等，但是当视频播放时我想要设置当前缩略图的样式，以便他们知道正在播放哪个缩略图。

我尝试将一个活动类添加到缩略图div，但该类的样式适用于所有这些类。任何人都可以想出如何实现这一目标或我出错的地方吗？

html代码

<div class="main">
<iframe width="800" height="500" src="video-1.mp4" frameborder="0" allowfullscreen></iframe>
</div>

<ul>
<li class="thumbnail"><a href="video-1.mp4" class="video-1" title=""><img src="images/videoPlayer-thumbnail-1.jpg" alt=""/></a></li>
<li class="thumbnail"><a href="video-2.mp4" class="video-2" title=""><img src="images/videoPlayer-thumbnail-2.jpg" alt=""/></a></li>
<li class="thumbnail"><a href="video-3.mp4" class="video-3" title=""><img src="images/videoPlayer-thumbnail-3.jpg" alt=""/></a></li>
</ul>

Answer 1

如果页面没有刷新，你可以为点击的IMG添加一个CLASS，然后你可以改变你想要的风格

编辑：

<li class="thumbnail">
  <a href="video-3.mp4?class=link1" class="video-3" title="">
     <img src="images/videoPlayer-thumbnail-3.jpg" alt=""/>
  </a>
</li>

使用jQuery拆分URL并找到参数，然后匹配css路径。

选择缩略图时将其设置为样式

1 个答案: