Plyr Video Player on Gatsby

I want to add plyr video player with selected options below to my gatsby blog. It takes video url from fetched json file. I just tried to add markdown it directly but it sometimes loading, sometimes not. Fetched url is changing from post to post.

Code

<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 Data

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

31 thoughts on “Plyr Video Player on Gatsby”

  1. Pingback: priligy sale usa
  2. Hey there I am so glad I found your weblog, I really found you by accident, while I was searching on Bing for something else, Nonetheless I
    am here now and would just like to say cheers for a fantastic post and a all
    round interesting blog (I also love the theme/design), I don’t have time to read it
    all at the moment but I have bookmarked it and also added in your RSS feeds, so when I have time
    I will be back to read much more, Please do keep up the superb b. http://www.deinformedvoters.org/aurogra-online

    Reply

Leave a Comment