使用 Plyr 播放器的 JSON 数据

问题描述

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

它将输出文件显示为 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>

解决方法

首先需要获取数据（这里我使用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 错误（超出本问题的范围）。

javascript plyr.js