用不同的源代码替换源代码

Question

我试图建立一个艺术家网站，其中有视频上传到网站。我已经使用HTML 5视频在我的网站上创建了一个视频播放器。因此，我为视频播放器创建了一个容器，为视频播放列表创建了另一个包装器。默认情况下，播放列表中的第一个视频将被播放。在我的播放列表中，我添加了一个play按钮，当您单击该按钮时，来自该部分的源代码应该添加到视频播放器的源代码中，旧的源代码应该被删除，新的源代码应该在视频播放器上播放。我不知道如何用新的视频源代码替换默认的源代码。

这是我对视频播放器的标记：

<div id="player" class="video">
  <video width="320" height="240" controls="" autoplay="">
    <source class="player-source" src="http://testsite.dev/files/playlist/video1.mp4" type="video/mp4">
  </video>
</div>

以下是我对视频播放列表的标记：

<table class="table">
  <thead>
    <tr>
      <th>Play</th>
      <th>Company</th>
      <th>Save</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td class="play-pause">http://testsite.dev/playlist/video1.mp4</td>
      <td>Sample Company 1</td>
      <td><a href="http://testsite.dev/playlist/video1.mp4" target="_blank">Download</a></td>
    </tr>
    <tr>
      <td class="play-pause">http://testsite.dev/playlist/video2.mp4</td>
      <td>Sample Company 2</td>
      <td><a href="http://testsite.dev/playlist/video2.mp4" target="_blank">Download</a></td>
    </tr>
    <tr>
      <td class="play-pause">http://testsite.dev/playlist/video3.mp4</td>
      <td>Sample Company 3</td>
      <td><a href="http://testsite.dev/playlist/video3.mp4" target="_blank">Download</a></td>
    </tr>
  </tbody>
</table>

这是我的Js代码：

$('.play-pause').click(function(){
  var $VideoURL = $(this).text(),
      $scripts = document.getElementsByTagName('source'),
      $currentScriptSrc = $scripts[$scripts.length-1].src;

  $scripts.removeAttr('src', $currentScriptSrc);
  $scripts.attr('src', $VideoURL);
});

我不知道该怎么做。我不知道我的代码有什么问题，或者我的实现缺少什么。请帮帮忙。谢谢。

Answer 1

您似乎混合了jQuery包装元素和香草元素。尝试以下几点：

$('.play-pause').click(function(){
    var videoURL = $(this).text(),
        $lastSource = $('source').last();

    $lastSource.attr('src', videoURL);
});

通过为源标记分配ID，可以使这个脚本更加健壮，这样您就可以更容易地检索它：$source = $('#sourceId');