Changing source with querySelector jquery dont work

Question

I´m using Plyr player with simple playlist. I have a j.code for changing source of video, but it works only with native player, but not with Plyr. With Plyr iniciating console is responding with TypeError: player.querySelector is not a function. Entire frame can be viewed here - https://special.novinky.cz/pocasi/index.html and code for function is below

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);
      });
    });

player is placed with this

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

and iniciated with this

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

Can you post how the `player` object is defined? – CertainPerformance Jan 08 '19 at 09:43 — CertainPerformance, Jan 08 '19 at 09:43
and plyr is iniciated with – David Rynes Jan 08 '19 at 09:45 — David Rynes, Jan 08 '19 at 09:45

score 0 · Accepted Answer · answered Jan 08 '19 at 10:15

So I found solution. Its weird, but it´s working.

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"
        }
      ]
    };
  });
});

Changing source with querySelector jquery dont work

1 Answers1