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

您可以更改display：none to display：block with on on on 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 2

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

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;

}

Answer 3

您可以使用解决方案https://jsfiddle.net/qhtftprq/

＆＃13;

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

＆＃13;

#myVideo
{
  display:none;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

#myVideo
{
  display:none;
}

＆＃13;

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

＆＃13;

希望这会对你有所帮助。

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

3 个答案: