在图像（缩略图）和视频之间切换

Posted 2023-05-07

【中文标题】在图像（缩略图）和视频之间切换

【英文标题】：Toggling between an image (thumbnail) and a video

【发布时间】：2018-01-14 11:42:33

【问题描述】：

我正在尝试在作为视频缩略图的图像和视频本身之间切换。这是标记：

<img id="thumbnail" src="/templates/beez_20/images/ws_wst2.png"  />
<video   controls><source src="templates/beez_20/video/ws_wst2.webm"  type='video/webm;codecs="vp8, vorbis"'/>
</video> 

我希望在加载页面时显示图像，单击时显示要显示的视频，反之，单击时返回图像时的视频。我在网上查看过，但找不到任何合适的例子。我会对 CSS 或 js/jquery 解决方案感到满意。提前致谢。

【问题讨论】：

你看poster attribute了吗？

How to set the thumbnail image on html5 video?的可能重复

【参考方案1】：

这里有一个解决方案https://jsfiddle.net/qhtftprq/

$('#myVideo').click(function()
   $(this)
    .hide()
    .siblings('#thumbnail')
    .show();
);

$('#thumbnail').click(function()
   $(this)
    .hide()
    .siblings('#myVideo')
    .show();
);

#myVideo

  display:none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="thumbnail" src="/templates/beez_20/images/ws_wst2.png" />
<video id="myVideo"   controls><source src="templates/beez_20/video/ws_wst2.webm"  type='video/webm;codecs="vp8, vorbis"' />
</video>

有动画效果的解决方案 https://jsfiddle.net/qhtftprq/1/

$('#myVideo').click(function()
	$(this)
  	.slideUp(function()
        $('#thumbnail').slideDown();
    );
);

$('#thumbnail').click(function()
	$(this)
  	.slideUp(function()
    	$('#myVideo').slideDown();
    )
);

#myVideo

  display:none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="thumbnail" src="/templates/beez_20/images/ws_wst2.png" />
<video id="myVideo"   controls><source src="templates/beez_20/video/ws_wst2.webm"  type='video/webm;codecs="vp8, vorbis"' />
</video>

希望这会对你有所帮助。

【讨论】：

效果很好，动画看起来很棒，谢谢。我确实忘记提到页面上会有几张图片，每张图片都与不同的视频相关。您能否建议如何更改代码以适应此情况

这里有一个解决方案 jsfiddle.net/qhtftprq/4 。多个图像和视频将它们包装在一个 div 容器中..

我在让代码在 Joomla 页面中运行时遇到问题，但第一个图像/视频确实可以正常工作。由于 jsfiddle 工作正常，我想我犯了一个复制错误。无论如何，非常感谢

最后，让这些多个图像/视频组合工作。只是缓存问题:)

【参考方案2】：

您可以将 display:none 更改为 display:block with onclick on javascript

function showVid(ele)

  document.getElementById("myVideo").style.display = "block";
  ele.style.display = "none"


function showImg(ele)

  document.getElementById("thumbnail").style.display = "block";
  ele.style.display = "none"

#myVideo

  display:none;

<img id="thumbnail" src="/templates/beez_20/images/ws_wst2.png"   onclick="showVid(this)"/>
<video id="myVideo" onclick="showImg(this)"   controls><source src="templates/beez_20/video/ws_wst2.webm"  type='video/webm;codecs="vp8, vorbis"' />
</video> 

【参考方案3】：

只是为了说明，我为您创建了这个简单的脚本。您可以让它响应点击图片而不是按钮，并用您的视频替换一张图片：

https://jsfiddle.net/fhshar93/

<div id="wrapper">

  <img id="img1" src="http://www.html.am/images/samples/remarkables_queenstown_new_zealand-300x225.jpg" />
  <img id="img2" src="http://www.primeliving.at/wp-content/uploads/2016/12/terrasse_ref38_klein_640x480-300x225.jpg" style="display: none" />

</div>

<button onClick="togglethis()">
Toggle images!
</button>



var toggler=true;

function togglethis()
    if(toggler)
    document.getElementById("img2").style.display="inherit";
    document.getElementById("img1").style.display="none";

  else
    document.getElementById("img1").style.display="inherit";
    document.getElementById("img2").style.display="none";

  
toggler=!toggler;