Gatsby上的Plyr视频播放器

Question

我想添加plyr视频播放器与下面选择的选项到我的gatsby博客。它从获取的json文件中获取视频url。我只是尝试直接添加markdown，但它有时加载，有时不加载。获取的url正在从一个帖子更改为另一个帖子。

代码

<video id="player" playsinline controls ></video>
<script src="https://cdn.plyr.io/3.6.4/plyr.js"></script>
<script>
var controls =['play-large', 'rewind','play','fast-forward','progress','current-time','duration','mute','volume','settings','pip', 'airplay','download','fullscreen'];
var player = new Plyr('#player', { controls });
fetch("test.url")
  .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,
        },
      ],
    };
})
</script>

Json数据

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

Answer 1

我只是试着直接添加markdown，但它有时加载，有时不加载

你需要了解到底发生了什么。您正在加载一个外部脚本(来自CDN：https://cdn.plyr.io/3.6.4/plyr.js)，直接位于React和Gatsby的作用域之外。当然，在生产环境(gatsby build)中，情况会变得很奇怪，因为在这里，代码的行为略有不同。

如果您在React中工作，则需要使用基于React的依赖项，在本例中为react-plyr。安装后，请执行以下操作：

npm install react-plyr --save

您可以通过以下方式简单地使用它：

import Plyr from 'react-plyr';

const IndexPage =()=>{

  return (
    <Plyr
      type="youtube" // or "vimeo"
      videoId="CDFN1VatiJA"
    />
  )
}

注意：videoId可以是视频ID，也可以是媒体地址。

在这一点上，您可以选择JSON或markdown方法，这让您感觉很舒服。重要的是从每种方法中获取videoId参数(源)。

下面是使用Plyr +Gatsby的详细文章：https://chaseohlson.com/plyr-gatsby-youtube-vimeo