Question

我正在尝试为视频弹出一个灯箱。它适用于一个视频。尝试使用多个视频时，第二个视频链接无效。单击时我得到Uncaught TypeError不能设置null的属性'src'。点击后没有任何反应，但是视频1在后台启动，你只能看到它的声音。任何帮助表示赞赏。

这里是JS

// Function to reveal lightbox and adding YouTube autoplay
function revealVideo(div,video_id) {
  var video = document.getElementById(video_id).src;
  document.getElementById(video_id).src = video+'&autoplay=1'; // adding autoplay to the URL
  document.getElementById(div).style.display = 'block';
}

// Hiding the lightbox and removing YouTube autoplay
function hideVideo(div,video_id) {
  var video = document.getElementById(video_id).src;
  var cleaned = video.replace('&autoplay=1',''); // removing autoplay form url
  document.getElementById(video_id).src = cleaned;
  document.getElementById(div).style.display = 'none';
}

这里是html

    <a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club" src="./content/uploads/2017/02/myimage.jpg" style="max-width:100%;max-height:100%"></a>
    <a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club 2" src="./content/uploads/2017/02/myimage2.jpg" style="max-width:100%;max-height:100%"></a>

    <div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
        <div class="lightbox-container">
            <div class="lightbox-content">
                <button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
                <div class="video-container">
                    <iframe allowfullscreen height="720" id="youtube" name="youtube" src="https://www.youtube.com/embed/xxxxxx?rel=0&amp;controls=1&amp;showinfo=0%20frameborder=0" width="1280"></iframe>
                </div>
            </div>
        </div>
    </div>
    <div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
        <div class="lightbox-container">
            <div class="lightbox-content">
                <button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
                <div class="video-container">
                    <iframe allowfullscreen height="720" id="youtube" name="youtube" src="https://www.youtube.com/embed/xxxxxx?rel=0&amp;showinfo=0%20frameborder=0" width="1280"></iframe>
                </div>
            </div>
        </div>
    </div>

Answer 1

我认为您的问题是您多次使用ID。
您在两个锚标记上都id="playme"，在两个lightbox-div上都有id="video"。

Answer 2

所以是的。首先，你应该只需要一个视频播放器 - 只需更改该播放器的src即可。以下是凌乱和丑陋，真的不是我必须这样做的方式，但它的工作原理。有一个，而不是有多个灯箱/播放器元素。单击该链接时，onClick将传递一个id，该id与一个对象数组匹配。如果找到匹配项，它会将SINGLE视频播放器元素的src更改为匹配的src并显示它。

从我正在阅读的内容来看，这可能更接近您所寻找的内容。

  var arrayOfVideos = [{
    id: 'youtube',
    src: "https://www.youtube.com/embed/xxxxxx?rel=0&amp;controls=1&amp;showinfo=0%20frameborder=0"
  }, {
    id: 'youtube2',
    src: "https://www.youtube.com/embed/xxxxxx?rel=0&amp;controls=1&amp;showinfo=0%20frameborder=0"
  }];

// Function to reveal lightbox and adding YouTube autoplay
revealVideo = function revealVideo(div, video_id) {
  // This just shows what we're displaying, purely for debugging.
  console.log("Showing the video "+video_id);
  // We have a single videoplayer div. We'll simply toggle its src.
  var video = document.getElementById("video-player");
  // All possible links have been saved as an array of ids and src properties.
  //  Here, we simply get the first element with the matching id
  var videoObject = arrayOfVideos.filter(function(obj) {
    return obj.id === video_id;
  })
  video.src = videoObject[0].src+'&autoplay=1'; // Adding autoplay to the URL
  document.getElementById(div).style.display = 'block';
  
}

// Hiding the lightbox and removing YouTube autoplay
hideVideo = function hideVideo(div, video_id) {
  var video = document.getElementById("video-player");
  var cleaned = video.src.replace('&autoplay=1', ''); // removing autoplay form url
  video.src = cleaned;
  document.getElementById(div).style.display = 'none';
}

<a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club" src="./content/uploads/2017/02/myimage.jpg" style="max-width:100%;max-height:100%"></a>
<a id="playme" onclick="revealVideo('video','youtube2')" title="Read more"><img alt="The Boys & Girls Club 2" src="./content/uploads/2017/02/myimage2.jpg"></a>
<div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
  <div class="lightbox-container">
    <div class="lightbox-content">
      <button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
      <div class="video-container">
        <iframe allowfullscreen height="720" id="video-player" src="" width="1280"></iframe>
      </div>
    </div>
  </div>
</div>

未捕获的TypeError无法设置null的onclick

2 个答案: