jquery - 在图像(缩略图)和视频之间切换

Question

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

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

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

Answer 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" alt="image"/>
<video id="myVideo" width="100%" height="100%" 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" alt="image"/>
<video id="myVideo" width="100%" height="100%" controls><source src="templates/beez_20/video/ws_wst2.webm"  type='video/webm;codecs="vp8, vorbis"' />
</video>

希望对您有所帮助。