使用把手单击图像时显示视频？

Question

我正在尝试在一个网页上工作，当我在其中单击图像标签时，我应该能够显示隐藏的视频。我用的是车把。我也想在某些用户点击其他照片时关闭此视频。

    <script type = "text/x-handlebars-template" id = "template">
            <div class = "row row-eq-height">
                {{#each images}}
                    <div class = " col-xs-12 col-md-3">
                        <div class = "thumbnail">
                            <img src = "{{src}}" style = "width : 50%;height :25%;" 
                             onClick = document.getElementById("video").style.display = "block";/>
                            <iframe style = "display:none;" id = "video" src = "{{video}}"/>
                            <h3>{{Song}}</h3>
                        </div>
                    </div>
                {{/each}}
            </div>
    </script>

这不起作用，视频已隐藏，但当我按下照片时它们无法显示。如果您需要更清楚地了解我的查询内容，请随时提问。任何帮助是极大的赞赏。提前致谢。

Answer 1

为了获得更好的性能，我建议您只创建除 iframe 之外的所有内容。当有人点击视频缩略图时，即时创建 iframe 并附加到父级。如果这样做，您将不必隐藏视频并尝试显示它们。

<div class="video-container" data-video="{{video}}">
  <div class="video-overlay" onclick="fetchVideo()">
    <img src = "{{src}}" class="video-thumbnail"/>
    <h3>{{Song}}</h3>
  </div>
  <div class="video-player"></div>
</div>

.video-player {
 // this is iframe container
}
.video-overlay {
  // syles
  transition: opacity 0.3s ease-out;
}
.video-thumbnail {
  width : 50%;
  height: 25%;
  object-fit: cover;
}
.hidden {
  opacity: 0;
}

function fetchVideo() {
  let parent = event.target.parentElement;
  let video = parent.dataset.video;
  let iframe = `<iframe width="560" height="315" src="${video}" frameborder="0" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>`;
  let player = event.target.nextElementSibling;
  player.insertAdjacentHTML('beforeend', iframe);
  event.target.classList.add("hidden");
}

使用把手单击图像时显示视频？

Show the video when the image is clicked using handlebars?

html

javascript

handlebars.js