Jump to content

How to play video selected from a list


gesulmino

Recommended Posts

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>

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...