将图像更改为视频答案

【问题标题】：Change image to video将图像更改为视频
【发布时间】：2020-04-30 08:37:37
【问题描述】：

我有一个图片库，您可以在其中通过“鼠标进入”同一页面上显示的缩略图来更改显示的图像。现在我想向画廊添加一个视频，但它不适用于我为图像提供的代码。问题是我希望图片和视频保持一定的大小。由于我想添加视频，所以 img 标签不会将视频显示为源，当我将 img 更改为 iframe 时，视频效果很好，但图片不再响应。这是我的代码：

HTML

<div class="slide_work">
 <img src="images/Illustration/puzzled.png">
</div>

<div class="slide_thumbs">
 <div id ="thumbs_active" class="puzzled_img" style="background-image:url(images/Illustration/puzzled_img.png);"></div>
 <div class="puzzled_vid" style="background-image:url(images/Illustration/puzzled_vid.png);"></div>

CSS

.slide_work > img {
 float:right;
 height:auto;
 width:auto;
 max-height:70vh;
 max-width:100%;

 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
}

（我尝试在 CSS 中添加另一个块，将“img”更改为“iframe”，但它对图像的响应性没有任何作用。）

JavaScript

$( ".puzzled_img" )
 .mouseenter(function() {
  $(".puzzled").attr('src', 'images/Illustration/puzzled.png');
  $(this).attr('id', 'thumbs_active');
  $(".puzzled_vid").removeAttr('id', 'thumbs_active');
})

$( ".puzzled_vid" )
 .mouseenter(function() {
  $(".puzzled").attr('src', 'https://player.vimeo.com/video/12345678');
  $(this).attr('id', 'thumbs_active');
  $(".puzzled_img").removeAttr('id', 'thumbs_active');
})

【问题讨论】：

如果您提供minimum reproducible code 来查看问题，那就太好了。

标签： javascript html css iframe responsive

【解决方案1】：

无需替换 <img> 标签的 src 属性或替换元素，只需添加更多幻灯片并根据索引值显示/隐藏当前悬停的幻灯片。

下面的示例有两张幻灯片，其中一张的类为hidden。您可以使用 CSS 隐藏此元素。缩略图有一个带有索引值的data-attribute，告诉您它们控制幻灯片列表中的哪个元素。每当您将缩略图悬停时，它都会查找具有正确索引的幻灯片并显示该幻灯片，同时隐藏所有其他幻灯片。

<div class="slide_work">
  <div class="slide_item">
    <img src="images/Illustration/puzzled.png">
  </div>
  <div class="slide_item hidden">
    <iframe src="https://player.vimeo.com/video/12345678"></iframe>
  </div>
</div>

<div class="slide_thumbs">
  <div data-index="0" id="thumbs_active" class="puzzled_img" style="background-image:url(images/Illustration/puzzled_img.png);"></div>
  <div data-index="1" class="puzzled_vid" style="background-image:url(images/Illustration/puzzled_vid.png);"></div>
</div>

var $slides = $('.slide_item');

$('.slide_thumbs > div').on('mouseenter', function() {
  var $this = $(this);
  var index = $this.data('index');
  var $target = $slides.eq(index);
  $slides.addClass('hidden');
  $target.removeClass('hidden');
});

【讨论】：

您好，感谢您的回答！我不得不承认我不太擅长编码，而且由于我已经有大约 3 1/2 年没有编码了，所以我在理解你为什么选择这个解决方案时遇到了一些问题。这就是为什么我决定不这样做。但我要感谢你让我摆脱了“我必须为图像和视频使用相同的标签”的问题——泡沫，这样我才能找到自己的解决方案。但是感谢您为确实了解您的代码的人提供此解决方案！

【解决方案2】：

这就是我最终决定这样做的方式：

HTML

<div class="slide_work">
    <div class="slide_item_img">
        <img class="slide_item_img" src="images/Illustration/puzzled.png"></div>
    <div class="slide_item_vid" style="display:none; float:right">
        <iframe class="slide_item_vid" style="display:none; float:right" src="https://player.vimeo.com/video/12345678" width="640" height="747" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
    </div>
</div>

CSS

$( ".puzzled_img" )
  .mouseenter(function(){
    $(".slide_item_vid").css("display", "none");
    $(".slide_item_img").css("display", "inherit");
    $(this).attr('id', 'thumbs_active');
    $(".puzzled_vid").removeAttr('id', 'thumbs_active');
  })

$( ".puzzled_vid" )
  .mouseenter(function(){
    $(".slide_item_img").css("display", "none");
    $(".slide_item_vid").css("display", "inherit");
    $(this).attr('id', 'thumbs_active');
    $(".puzzled_img").removeAttr('id', 'thumbs_active');
  })

【讨论】：