How to play video selected from a list

[gesulmino]

Hi,

I have a list of movies on a grid; when the user click to an item it start to play the selected movie. The movie will be played by mean a video tag and plyr. Plyr have some setters and getters to customize video player, for example it has source property that contain the path of the movie to play.

The question is: is it possible to set the source property with the value of response of an ajax request?

For example:

<div class="container" align="center">
    <video id="myPlayer" playsinline  controls>
    video non supportato
    </video>
</div>

<script>
  const player = new Plyr(document.getElementById('myPlayer'));
 
  player.source = {
    type: 'video',
    title: 'Sport movies',
    sources: [
        {
            src: 'videos/blankvideo.mp4',
            type: 'video/mp4',
            size: 576
        }
    ],
    poster: 'files/blankposter.jpeg'
  };

  player.on('ended', event => {
    console.log("end play");
    ajaxRequest(FrameStreaming.htmlVideoFrame, 'ended', {});
  });
 
  player.on('ready', event => {
    console.log("ready");
   
    this.source = ajaxRequest(FrameStreaming.htmlVideoFrame, 'ready', {});

    this.play()
  });
 
  player.disableContextMenu = true;
  player.autoplay = false;
</script>