2

您好，我有一个php代码，它显示了一个json带有视频的文件url。我想url在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>

4

1 回答 1

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

于 2021-02-12T12:42:32.610 回答