使用Plyr Player的JSON数据

Question

你好，我有一个php代码，它显示一个带有视频url的json文件。我想在plyr播放器中使用那个plyr。

单击链接https://example.com/test.php时

它将输出文件显示为json，即：

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

我想在javascript中使用这些数据，并在plyr播放器中打开它。一些来自javascript播放器的plyr代码。我真的不知道该拿它怎么办。

​

<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

您需要首先获取数据(在这里，我使用fetch)和then (它是一个async函数)设置视频源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',
        },
      ],
      */
    };
})

注意：您可能想要处理fetch错误(超出了这个问题的范围)。