Question

我创建了一个功能，所以当您点击“播放”链接时，带有黑色背景的div会更改为iframe视频。它似乎工作正常。问题是，我想添加多个播放链接和多个视频。我不知道该怎么做，所以当你点击第二个播放链接时，视频会在同一个地方从第一个视频变为第二个视频。

我的代码：

<script>
     var toggle = function() {
     var mydiv = document.getElementById('videoholder');document.getElementById("frame").src="http://www.youtube.com/embed/YuOBzWF0Aws";
     if (mydiv.style.display === 'block' || mydiv.style.display === '')
     mydiv.style.display = 'none';
     else
     mydiv.style.display = 'block' 
     }
</script>


    <a href="javascript:void(0)" onclick="toggle();">PLAY</a><br>
    <div style="width:560px; height:315px; background-color:#111111;">
     <div id="videoholder" style="display:none;">
      <iframe id="frame" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
    </div></div>

Answer 1

你可以尝试这样的事情。

<script>
    function toggle(url) {
         var mydiv = document.getElementById('videoholder');
         document.getElementById("frame").src = url;
         if (mydiv.style.display === 'block' || mydiv.style.display === '') {
             mydiv.style.display = 'none';
         } else {
             mydiv.style.display = 'block'
         }
     }
</script>


<a href="javascript:void(0)" onclick="toggle('http://www.youtube.com/embed/YuOBzWF0Aws');">PLAY 1</a><br>
<a href="javascript:void(0)" onclick="toggle('http://www.youtube.com/embed/dQw4w9WgXcQ');">PLAY 2</a><br>
<div style="width:560px; height:315px; background-color:#111111;">
 <div id="videoholder" style="display:none;">
  <iframe id="frame" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div></div>

Answer 2

您可以使用document.getElementById('frame').src='http://linktonewvideo.com';

希望这有帮助！

使用js切换更改元素

2 个答案: