javascript - 如何使用javascript在我的网站的一个页面中获取多个视频和播放器图像

Question

我需要在我网站上的视频上创建多个带有播放器图像的视频。

播放器图像必须toggle与点击用户。

在此代码中，它与一个视频和相同播放器图像的 id 一起使用，但通过插入multiple videos，此代码不起作用。

我需要此代码适用于我网站的一页上的多个视频。

请帮我做。

var videoPlayer = document.getElementById('videoPlayer');
var x = document.getElementById('playback-animation')

videoPlayer.addEventListener('click', () => {
  x.classList.toggle("active");
});

.my-video {
  position: relative;
  background-color: var(--c4);
  margin: var(--mr);
}

.playback-animation {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -55px;
  margin-top: -55px;
  width: 110px;
  height: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: block;
}

.playback-animation.active {
  display: none;
}

<div class="meeting--videos">
  <div class="my-video">
    <div class="playback-animation" id="playback-animation">
      <svg xmlns="http://www.w3.org/2000/svg" width="110" height="110" viewBox="0 0 110 110">
                <g id="Group_2579" data-name="Group 2579" transform="translate(-1330 -1514)">
                  <g id="Ellipse_69" data-name="Ellipse 69" transform="translate(1330 1514)" fill="none" stroke="#E64A19" stroke-width="1">
                  <circle cx="55" cy="55" r="55" stroke="none"></circle>
                  <circle cx="55" cy="55" r="54.5" fill="none"></circle>
                </g>
                <g id="Ellipse_70" data-name="Ellipse 70" transform="translate(1340 1524)" fill="none" stroke="#E64A19" stroke-width="2" opacity="0.736">
                    <circle cx="45" cy="45" r="45" stroke="none"></circle>
                    <circle cx="45" cy="45" r="44" fill="none"></circle>
                </g>
                <circle id="Ellipse_71" data-name="Ellipse 71" cx="35" cy="35" r="35" transform="translate(1350 1534)" fill="#E64A19" opacity="0.996"></circle>
                <g id="play-button-arrowhead" transform="translate(1365.122 1556.063)">
                  <path id="Path_77" data-name="Path 77"    d="M12.274.563C9.973-.757,8.107.324,8.107,2.976V22.548c0,2.655,1.866,3.735,4.167,2.416l17.106-9.81c2.3-1.321,2.3-3.46,0-4.78Z" transform="translate(3 0)" fill="#fff"></path>
                </g>
        </g>
    </svg>
 </div>
    <video width="100%" id="videoPlayer" class="videoPlayer" controls>
                                    <source src="video/video.mp4" type="video/mp4">
                                    <source src="video/video.mp4" type="video/webm">
                                    Your browser does not support the video tag.
                                </video>
  </div>

  <div class="my-video">
    <div class="playback-animation" id="playback-animation">
      <svg xmlns="http://www.w3.org/2000/svg" width="110" height="110" viewBox="0 0 110 110">
                                        <g id="Group_2579" data-name="Group 2579" transform="translate(-1330 -1514)">
                                            <g id="Ellipse_69" data-name="Ellipse 69" transform="translate(1330 1514)" fill="none"
                                                stroke="#E64A19" stroke-width="1">
                                                <circle cx="55" cy="55" r="55" stroke="none"></circle>
                                                <circle cx="55" cy="55" r="54.5" fill="none"></circle>
                                            </g>
                                            <g id="Ellipse_70" data-name="Ellipse 70" transform="translate(1340 1524)" fill="none"
                                                stroke="#E64A19" stroke-width="2" opacity="0.736">
                                                <circle cx="45" cy="45" r="45" stroke="none"></circle>
                                                <circle cx="45" cy="45" r="44" fill="none"></circle>
                                            </g>
                                            <circle id="Ellipse_71" data-name="Ellipse 71" cx="35" cy="35" r="35"
                                                transform="translate(1350 1534)" fill="#E64A19" opacity="0.996"></circle>
                                            <g id="play-button-arrowhead" transform="translate(1365.122 1556.063)">
                                                <path id="Path_77" data-name="Path 77"
                                                    d="M12.274.563C9.973-.757,8.107.324,8.107,2.976V22.548c0,2.655,1.866,3.735,4.167,2.416l17.106-9.81c2.3-1.321,2.3-3.46,0-4.78Z"
                                                    transform="translate(3 0)" fill="#fff"></path>
                                            </g>
                                        </g>
                                    </svg>
    </div>
    <video width="100%" id="videoPlayer" class="videoPlayer" controls>
                                    <source src="video/video.mp4" type="video/mp4">
                                    <source src="video/video.mp4" type="video/webm">
                                    Your browser does not support the video tag.
                                </video>
  </div>

  <div class="my-video">
    <div class="playback-animation" id="playback-animation">
      <svg xmlns="http://www.w3.org/2000/svg" width="110" height="110" viewBox="0 0 110 110">
                                        <g id="Group_2579" data-name="Group 2579" transform="translate(-1330 -1514)">
                                            <g id="Ellipse_69" data-name="Ellipse 69" transform="translate(1330 1514)" fill="none"
                                                stroke="#E64A19" stroke-width="1">
                                                <circle cx="55" cy="55" r="55" stroke="none"></circle>
                                                <circle cx="55" cy="55" r="54.5" fill="none"></circle>
                                            </g>
                                            <g id="Ellipse_70" data-name="Ellipse 70" transform="translate(1340 1524)" fill="none"
                                                stroke="#E64A19" stroke-width="2" opacity="0.736">
                                                <circle cx="45" cy="45" r="45" stroke="none"></circle>
                                                <circle cx="45" cy="45" r="44" fill="none"></circle>
                                            </g>
                                            <circle id="Ellipse_71" data-name="Ellipse 71" cx="35" cy="35" r="35"
                                                transform="translate(1350 1534)" fill="#E64A19" opacity="0.996"></circle>
                                            <g id="play-button-arrowhead" transform="translate(1365.122 1556.063)">
                                                <path id="Path_77" data-name="Path 77"
                                                    d="M12.274.563C9.973-.757,8.107.324,8.107,2.976V22.548c0,2.655,1.866,3.735,4.167,2.416l17.106-9.81c2.3-1.321,2.3-3.46,0-4.78Z"
                                                    transform="translate(3 0)" fill="#fff"></path>
                                            </g>
                                        </g>
                                    </svg>
    </div>
    <video width="100%" id="videoPlayer" class="videoPlayer" controls>
                                    <source src="video/video.mp4" type="video/mp4">
                                    <source src="video/video.mp4" type="video/webm">
                                    Your browser does not support the video tag.
                                </video>
  </div>
</div>

标签： javascripthtmlcss

Answer 1

问题是您使用的是“id”而不是“class”。您不能使用 'id' 选择多个 HTML 元素。所以你也应该重命名你的html代码的id。

//Select all videoPlayer by using their class name.
var videoPlayers = document.getElementsByClassName('videoPlayer');
for(let vidPlayer of videoPlayers){
    vidPlayer.addEventListener('click', () => {
        //Select the element with class '.playback-animation' associated with vidPlayer.
        let x=vidPlayer.parentElement.querySelector('.playback-animation');
        x.classList.toggle("active");
    })
}

.my-video {
  position: relative;
  background-color: var(--c4);
  margin: var(--mr);
}

.playback-animation {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -55px;
  margin-top: -55px;
  width: 110px;
  height: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: block;
}

.playback-animation.active {
  display: none;
}

<div class="meeting--videos">
  <div class="my-video">
    <div class="playback-animation" id="playback-animation1">
      <svg xmlns="http://www.w3.org/2000/svg" width="110" height="110" viewBox="0 0 110 110">
                <g id="Group_2579" data-name="Group 2579" transform="translate(-1330 -1514)">
                  <g id="Ellipse_69" data-name="Ellipse 69" transform="translate(1330 1514)" fill="none" stroke="#E64A19" stroke-width="1">
                  <circle cx="55" cy="55" r="55" stroke="none"></circle>
                  <circle cx="55" cy="55" r="54.5" fill="none"></circle>
                </g>
                <g id="Ellipse_70" data-name="Ellipse 70" transform="translate(1340 1524)" fill="none" stroke="#E64A19" stroke-width="2" opacity="0.736">
                    <circle cx="45" cy="45" r="45" stroke="none"></circle>
                    <circle cx="45" cy="45" r="44" fill="none"></circle>
                </g>
                <circle id="Ellipse_71" data-name="Ellipse 71" cx="35" cy="35" r="35" transform="translate(1350 1534)" fill="#E64A19" opacity="0.996"></circle>
                <g id="play-button-arrowhead" transform="translate(1365.122 1556.063)">
                  <path id="Path_77" data-name="Path 77"    d="M12.274.563C9.973-.757,8.107.324,8.107,2.976V22.548c0,2.655,1.866,3.735,4.167,2.416l17.106-9.81c2.3-1.321,2.3-3.46,0-4.78Z" transform="translate(3 0)" fill="#fff"></path>
                </g>
        </g>
    </svg>
 </div>
    <video width="100%" id="videoPlayer1" class="videoPlayer" controls>
                                    <source src="video/video.mp4" type="video/mp4">
                                    <source src="video/video.mp4" type="video/webm">
                                    Your browser does not support the video tag.
                                </video>
  </div>

  <div class="my-video">
    <div class="playback-animation" id="playback-animation2">
      <svg xmlns="http://www.w3.org/2000/svg" width="110" height="110" viewBox="0 0 110 110">
                                        <g id="Group_2579" data-name="Group 2579" transform="translate(-1330 -1514)">
                                            <g id="Ellipse_69" data-name="Ellipse 69" transform="translate(1330 1514)" fill="none"
                                                stroke="#E64A19" stroke-width="1">
                                                <circle cx="55" cy="55" r="55" stroke="none"></circle>
                                                <circle cx="55" cy="55" r="54.5" fill="none"></circle>
                                            </g>
                                            <g id="Ellipse_70" data-name="Ellipse 70" transform="translate(1340 1524)" fill="none"
                                                stroke="#E64A19" stroke-width="2" opacity="0.736">
                                                <circle cx="45" cy="45" r="45" stroke="none"></circle>
                                                <circle cx="45" cy="45" r="44" fill="none"></circle>
                                            </g>
                                            <circle id="Ellipse_71" data-name="Ellipse 71" cx="35" cy="35" r="35"
                                                transform="translate(1350 1534)" fill="#E64A19" opacity="0.996"></circle>
                                            <g id="play-button-arrowhead" transform="translate(1365.122 1556.063)">
                                                <path id="Path_77" data-name="Path 77"
                                                    d="M12.274.563C9.973-.757,8.107.324,8.107,2.976V22.548c0,2.655,1.866,3.735,4.167,2.416l17.106-9.81c2.3-1.321,2.3-3.46,0-4.78Z"
                                                    transform="translate(3 0)" fill="#fff"></path>
                                            </g>
                                        </g>
                                    </svg>
    </div>
    <video width="100%" id="videoPlayer" class="videoPlayer2" controls>
                                    <source src="video/video.mp4" type="video/mp4">
                                    <source src="video/video.mp4" type="video/webm">
                                    Your browser does not support the video tag.
                                </video>
  </div>

  <div class="my-video">
    <div class="playback-animation" id="playback-animation3">
      <svg xmlns="http://www.w3.org/2000/svg" width="110" height="110" viewBox="0 0 110 110">
                                        <g id="Group_2579" data-name="Group 2579" transform="translate(-1330 -1514)">
                                            <g id="Ellipse_69" data-name="Ellipse 69" transform="translate(1330 1514)" fill="none"
                                                stroke="#E64A19" stroke-width="1">
                                                <circle cx="55" cy="55" r="55" stroke="none"></circle>
                                                <circle cx="55" cy="55" r="54.5" fill="none"></circle>
                                            </g>
                                            <g id="Ellipse_70" data-name="Ellipse 70" transform="translate(1340 1524)" fill="none"
                                                stroke="#E64A19" stroke-width="2" opacity="0.736">
                                                <circle cx="45" cy="45" r="45" stroke="none"></circle>
                                                <circle cx="45" cy="45" r="44" fill="none"></circle>
                                            </g>
                                            <circle id="Ellipse_71" data-name="Ellipse 71" cx="35" cy="35" r="35"
                                                transform="translate(1350 1534)" fill="#E64A19" opacity="0.996"></circle>
                                            <g id="play-button-arrowhead" transform="translate(1365.122 1556.063)">
                                                <path id="Path_77" data-name="Path 77"
                                                    d="M12.274.563C9.973-.757,8.107.324,8.107,2.976V22.548c0,2.655,1.866,3.735,4.167,2.416l17.106-9.81c2.3-1.321,2.3-3.46,0-4.78Z"
                                                    transform="translate(3 0)" fill="#fff"></path>
                                            </g>
                                        </g>
                                    </svg>
    </div>
    <video width="100%" id="videoPlayer" class="videoPlayer3" controls>
                                    <source src="video/video.mp4" type="video/mp4">
                                    <source src="video/video.mp4" type="video/webm">
                                    Your browser does not support the video tag.
                                </video>
  </div>
</div>