使用 querySelector jquery 更改源不起作用答案

【问题标题】：Changing source with querySelector jquery dont work使用 querySelector jquery 更改源不起作用
【发布时间】：2019-01-08 09:42:33
【问题描述】：

我正在使用带有简单播放列表的 Plyr 播放器。我有一个用于更改视频源的 j.code，但它仅适用于本机播放器，但不适用于 Plyr。使用 Plyr 发起控制台响应 TypeError: player.querySelector is not a function。整个框架可以在这里查看 - https://special.novinky.cz/pocasi/index.html 函数代码如下

document.querySelectorAll('.video-link').forEach(link => {
      link.addEventListener('click', function() {
        const videoUrl = link.dataset.videoLinkUrl;
        player.source = videoUrl;
        player.querySelector('source').setAttribute('src', videoUrl);
        player.load();
        player.play();
        console.log('link.dataset.videoLinkUrl', link.dataset.videoLinkUrl);
      });
    });

玩家被放置在这个位置

<video poster="https://special.novinky.cz/pocasi/img/pocasi.jpg" id="player" playsinline controls>
  <source src="https://special.novinky.cz/pocasi/video/cizinsky.mp4" type="video/mp4">
</video>

并由此引发

<script src="js/plyr.js"></script>
<script>const player = new Plyr('#player');</script>

【问题讨论】：

你能发布player对象是如何定义的吗？
和 plyr 被发起with

标签： jquery video plyr.js

【解决方案1】：

所以我找到了解决方案。这很奇怪，但它的工作原理。

document.querySelectorAll(".video-link").forEach(function(link) {
  link.addEventListener("click", function() {
    const videoUrl = link.dataset.videoLinkUrl;
    player.source = {
      type: "video",
      title: "video_title",
      sources: [
        {
          src: videoUrl,
          type: "video/mp4"
        }
      ]
    };
  });
});

【讨论】：