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

I'm trying to build an artist website which has video uploaded in the website. I've used HTML 5 video to create a video player in my website. So, I've created a container for the video player and another wrapper for the video playlist. By default, the first video in the playlist will be played. In my playlist, I've added a play button, when you clicked at that button, then the source code from that section should be added in the video player's source code and the old source code should be removed and the new source code should play on the video player. I'm not sure how to replace the default source code with the new source code of the video.

我正在尝试建立一个在网站上传的视频的艺术家网站。我已经使用HTML 5视频在我的网站上创建了一个视频播放器。所以,我为视频播放器创建了一个容器,为视频播放列表创建了另一个包装器。默认情况下,将播放播放列表中的第一个视频。在我的播放列表中,我添加了一个播放按钮,当您点击该按钮时,该部分的源代码应该添加到视频播放器的源代码中,旧的源代码应该被删除,新的源代码应该播放在视频播放器上。我不确定如何用视频的新源代码替换默认源代码。

Here is my markup for the video player:

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

<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>

Here is my markup for the Video playlist:

这是我的视频播放列表的标记:

<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>

Here is my Js Code:

这是我的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);
});

I'm not sure how to make this work. I don't know what's wrong with my code or lacking with my implementation. Please help. Thank you.

我不知道如何使这项工作。我不知道我的代码有什么问题或者我的实现缺乏。请帮忙。谢谢。

1 个解决方案

#1

You seem to mix jQuery wrapped elements and vanilla elements. Try the following:

你似乎混合了jQuery包装元素和vanilla元素。请尝试以下方法:

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

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

You could make this script more robust by assigning an ID to your source tag, so that you can retrieve it much more easily: $source = $('#sourceId');

您可以通过为源标记分配ID来使此脚本更加健壮,以便您可以更轻松地检索它:$ source = $('#sourceId');

#1