How to change the video souce dynamically so that different videos can be played

Question

i'm using plyr.js https://github.com/sampotts/plyr

Problem: i'm unable to change the video source and play each video

below is how setup:

$(function(){
  
    $('.player-src').on('click',function(){
       var videosrc = $(this).attr('data-src');
       //for video
         $('#plyr-video source').attr('src',videosrc);
		     plyr.setup();
         
        // for audio
         $('#plyr-audio source').attr('src',videosrc);
		     plyr.setup();
   });

});

ul{
  display:block;
  list-style: none;
  background:#eaeaed;
  padding:15px;
}

li.player-src{
     padding: 12px;
    background: orange;
    color: #fff;
    display: inline-flex;
    margin: 12px;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.plyr.io/2.0.15/plyr.js"></script>
<link href="https://cdn.plyr.io/2.0.15/plyr.css" rel="stylesheet"/>
<ul >
  <li class="player-src" data-src="/local/filename.mp4">play-video1</li>
  <li class="player-src" data-src="https://vjs.zencdn.net/v/oceans.webm">play-video2</li>
  <li class="player-src" data-src="/local/filename.mp4">play-video3</li>
  <li class="player-src" data-src="https://vjs.zencdn.net/v/oceans.webm">play-video4</li>
  <li class="player-src" data-src="/local/filename.mp4">play-video5</li>
</ul>



 <audio id="plyr-audio" controls>
                      <source src="https://vjs.zencdn.net/v/oceans.webm" type="audio/mp3">
                      <source src="https://vjs.zencdn.net/v/oceans.webm" type="audio/ogg">
                    </audio>


<video id="plyr-video" poster="/path/to/video-poster.png" controls style="max-width: 533px;">
                    <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/mp4">
                    <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm">
                    <!-- Captions are optional -->
                    <track kind="captions" label="English captions" src="/path/to/video-caption.vtt" srclang="en" default>
                  </video>

Please Help me in Advance!!

Answer 1

You could set .source attribute directly, this allows changing the player source and type on the fly.

Here is a full demo showing how to change the video dynamically, you could do the same thing with sound player. below is a snippet how to do it:

player.source = {
    type: 'video',
    title: 'Example title',
    sources: [
        {
            src: '/path/to/movie.mp4',
            type: 'video/mp4',
            size: 720,
        } 
    ],
    poster: '/path/to/poster.jpg'
};