JSON Plyr 播放器的数据

Question

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

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

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

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

<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 错误（超出此问题的范围）。

JSON Plyr 播放器的数据

JSON Data with Plyr Player

javascript

plyr.js