未捕獲的類型錯誤無法設置null屬性'src'onclick

我試圖讓一個燈箱彈出視頻。它適用於一個視頻。在嘗試使用多個視頻時，第二個視頻鏈接不工作。點擊時，我得到Uncaught TypeError無法設置null的屬性'src'。點擊時沒有任何反應，但video1從背景開始，你不能只看到她的聲音。任何幫助表示讚賞。未捕獲的類型錯誤無法設置null屬性'src'onclick

這裏去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>

來源

2017-02-08 Mitchell Daniel

那麼，你的兩個div有相同的ID。並且您要求document.getElementById爲您提供一個id爲'youtube'的元素，該元素不存在。所以，是的，它會去吧。 – Snowmonkey

只需使用'element.addEventListener（「click」，function（）{}）''。內聯html事件監聽器被認爲是不好的做法。 –

'id =「youtube」'也存在兩次。不要多次使用相同的ID。 – Xufox

我覺得這裏的問題是，你正在使用的ID多次。
您在兩個水印標記上都獲得了id="playme"，在兩個lightbox-div上都獲得了id="video"。

來源

2017-02-08 19:37:06 Christian

所以是的。首先，你應該只需要一個視頻播放器 - 只需更改該播放器的src，它應該做你想做的。以下是混亂和醜陋的，並不是我必須這樣做的方式，但它的工作原理。有一個，而不是有多個燈箱/播放器元素。當你點擊鏈接時，onClick傳遞一個id，它與一組對象相匹配。如果找到匹配，它會將單個視頻播放器元素的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>

來源

2017-02-08 20:28:33 Snowmonkey

未捕獲的類型錯誤無法設置null屬性'src'onclick

回答

相關問題