JSON Data with Plyr Player

Question

Hello I have a php code which shows a json file with video url. I want to use that url in plyr player.

When click the link https://example.com/test.php

It shows the output file as json which is:

[{"label":"Original","file":"https://example.com.mp4","type":"video\/mp4"}] 

I want to use that data with javascript and open it in plyr player. Some javascript code from plyr player. I really do not know what to do with it.

<video id="player" playsinline controls>
</video>
<script src="https://cdn.plyr.io/3.6.4/plyr.js"></script>
<script>
  const player = new Plyr('#player');
</script>

Answer 1

You need to first get the data (here, I use fetch) and then (it is an async function) set the video source data:

const player = new Plyr('#player');
fetch('https://example.com/test.php')
  .then(resp => resp.json())
  .then( data => {
    player.source = {
      type: 'video',
      title: data[0].label,
      sources: [
        {
          src: data[0].file,
          type: data[0].type,
          size: 720,
        },
      ],
      /*
         You can add extra info to the player:

      poster: '/path/to/poster.jpg',
      previewThumbnails: {
        src: '/path/to/thumbnails.vtt',
      },
      tracks: [
        {
          kind: 'captions',
          label: 'English',
          srclang: 'en',
          src: '/path/to/captions.en.vtt',
          default: true,
        },
        {
          kind: 'captions',
          label: 'French',
          srclang: 'fr',
          src: '/path/to/captions.fr.vtt',
        },
      ],
      */
    };
})

Note: You'll probably want to handle fetch errors (outside the scope of this question).