如何将每个占位符图片替换为相应的视频？

Question

因此，我尝试创建一个视频网格，其中“占位符”图片在单击时被 DOM 中旁边的视频替换。

如果有一张图片/视频，我编写的代码效果很好，但应该有 6 个。我尝试过处理占位符数组（使用 for (let i...)），但是我识别的方式nextElementSibling 的“video”常量似乎停止工作。或者也许还有其他问题，我不确定。

我认为 forEach 不会在这里帮助我，至少就我了解如何使用它而言。

网格中的一项如下所示：

<div class="videography__content--item">
  <p class="video__title">Ноель Гоеман - Sanctus</p>
  <div class="video__placeholder--container">
     <img src="img/videography/noel-goemanne-sanctus.jpg" alt="" class="placeholder">
     <div class="play-button"></div>
  </div>
  <iframe class="video-insert" src="https://www.youtube-nocookie.com/embed/BkRqCCkUku0" 
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; 
clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

这是我的 JS 代码：

(function () {
  const placeholder = document.querySelector(".video__placeholder--container");
  const video = placeholder.nextElementSibling;

  placeholder.addEventListener("click", switchToVideo);

  function switchToVideo() {
    placeholder.style.display = "none";
    video.style.display = "block";
  }
})();

我确信有一些简单的方法可以做到这一点，但我是 JS 新手，所以非常感谢您的帮助！

Answer 1

用这段代码解决了问题：

     (function () {
  const arrPictures = document.querySelectorAll(".video__placeholder--container");
  const arrVideos = document.querySelectorAll(".video-insert");

  arrPictures.forEach(function (el, index) {
    el.addEventListener('click', () => switchToVideo(el, index))
  });

  function switchToVideo(el, index) {
    el.style.display = "none";
    arrVideos[index].style.display = "block";
  }
})();

Answer 2

要将占位符图片替换为项目中的相应视频，请按照以下简明步骤操作：

确定占位符位置：

通过编辑时间线或脚本找到视频项目中占位符图片的每个实例。 准备视频：

准备好视频的最终版本以替换占位符。确保它们与每个部分的预期内容保持一致。 检查兼容性：

考虑分辨率和其他设置，确认视频文件格式符合视频编辑软件的要求。 备份项目：

在进行任何更改之前创建项目备份以防止潜在的数据丢失。 打开编辑软件：

启动视频编辑软件并打开包含占位符图片的项目文件。 替换图片：

通过选择每个占位符图片、右键单击并选择替换媒体选项来替换它。为每个实例选择相应的视频文件。 调整时间：

检查并调整时间和过渡，以确保视频之间的无缝流动，保持项目的连贯性。 预览编辑：

播放视频以预览更改。确保替换的视频符合您的愿景并有效传达预期信息。 保存更改：

保存您的项目，如有必要，导出或渲染最终视频以供分发。 在阿德莱德的视频营销领域，整合符合您的营销策略的引人入胜的视频至关重要。确保您的视频与当地观众产生共鸣，体现您品牌的独特性。如果需要，请咨询阿德莱德当地的视频营销公司，了解区域趋势和有效策略，以增强视频营销工作的影响力，有助于提高品牌在当地社区的知名度和参与度。