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

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>

希望这会对你有所帮助。

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

Answer 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;

}