Hello I have a php
code which shows a json
file with video url
. I want to use that url
in plyr
player.
When click the link https://example.com/test.php
It shows the output file as json
which is:
[{"label":"Original","file":"https://example.com.mp4","type":"video\/mp4"}]
I want to use that data with javascript
and open it in plyr
player. Some javascript
code from plyr
player. I really do not know what to do with it.
<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>
You need to first get the data (here, I use fetch
) and then
(it is an async
function) set the video source 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',
},
],
*/
};
})
Note: You'll probably want to handle fetch
errors (outside the scope of this question).