单击图像时如何隐藏图像并显示视频而不是它？使用 JavaScript答案

【问题标题】：How to hide an image when it's clicked and show a video instead of it ? Using JavaScript单击图像时如何隐藏图像并显示视频而不是它？使用 JavaScript
【发布时间】：2019-07-30 12:19:04
【问题描述】：

我有一个包含图像的 div。在这个 div 下，我有另一个 div，其中包含一个视频，但它的显示设置为 display: none。这是问题。单击图像时如何隐藏第一个div并显示第二个（视频的div）而不是它？

<div class="picture-section">
    <img id="play-video" src="/images/Play.svg">
    <img src="images/1.jpg">
</div>

<div class="video-section">
    <video width="100%"  autoplay loop>
        <source src="/videos/v1.mp4" type="video/mp4">
    </video>   
</div>

【问题讨论】：

到目前为止你有什么尝试？
您不能使用poster 属性吗？听起来您想要一个缩略图 - poster 的行为与您所描述的完全一样。
stackoverflow.com/questions/5278262/…

标签： javascript html css symfony

【解决方案1】：

<div class="picture-section">
   <img id="play-video" src="/images/Play.svg">
   <img src="images/1.jpg">
</div>
<div class="video-section">
   <video width="100%" id="vid" style="display:none;" autoplay loop>
      <source src="/videos/v1.mp4" type="video/mp4">
   </video>   
 </div>
<script>
var play = document.getElementById('play-video');
var video = document.getElementById('vid');
play.addEventListener("click",function()
{
play.style.display = "none";
video.style.display = "block";

});
</script>

【讨论】：

【解决方案2】：

你可以试试这样的：

var pic = document.getElementById("pic");
var vid = document.getElementById("vid");

var btn = document.getElementById("play-video");

btn.addEventListener("click", function(evt) {
   if (window.getComputedStyle(pic).display == "none") {
       pic.style.display = "";
       vid.style.display = "none";
   } else {
       pic.style.display = "none";
       vid.style.display = ""
   }
});

         <div class="picture-section">
            <img id="play-video" src="/images/Play.svg" alt="Show/Hide Btn">
            <img id="pic" src="images/1.jpg" alt="My Pic">
        </div>

        <div class="video-section">
            <video id="vid"  width="100%"  autoplay loop >
                <source src="/videos/v1.mp4" type="video/mp4">
            </video>   
        </div>

【讨论】：