Question

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

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

<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包装元素和vanilla元素。请尝试以下方法：

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

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

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

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

1 个答案: