I am currently trying to use Plyr as a video player but i am running into an issue, i have multiple qualities but for some reason i am not able to switch as it doesnt even show me quality selector in the menu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
<style>
body {
margin: 0;
overflow: hidden;
background-color: black;
}
#playerContainer {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
#myPlayer {
max-width: 100%;
max-height: 100%;
}
#backButton {
position: absolute;
top: 20px;
left: 20px;
display: flex;
align-items: center;
cursor: pointer;
}
#backButton img {
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<div id="playerContainer">
<video id="myPlayer" controls >
<!-- Video sources and captions will be dynamically added here -->
</video>
</div>
<a id="backButton" href="/wait">
<img src="{{ url_for('static', filename='arrowback.png') }}" alt="Back">
</a>
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<script>
const timestampMovie = parseFloat('{{ timestamp }}');
let title = '';
document.addEventListener('DOMContentLoaded', () => {
const response = {{api_response|safe}};
if (response.title != '' && response.title != undefined) {
title = response.title;
}
if (
response != undefined &&
response.Qualities != undefined &&
response.Qualities != null
) {
const myPlayer = new Plyr('#myPlayer', {
title: title,
settings: ['captions', 'quality', 'speed', 'loop'],
});
makePlayer(myPlayer, response.Qualities, response.Srtfiles);
}
});
function extractNumericSize(label) {
if (!label) {
console.log('no label');
return label;
}
const matches = label.match(/\d+/);
if (matches) {
const numericSize = parseInt(matches[0], 10);
const result = label.toLowerCase().includes('4k') ? 2160 : numericSize;
console.log(`Label: ${label}, Numeric Size: ${numericSize}, Result: ${result}`);
return result;
}
return label;
}
function makePlayer(myPlayer, qualities, subtitles) {
qualities.forEach((value, index) => {
const track = document.createElement('source');
const numericSize = extractNumericSize(value.quality);
track.src = value.path;
track.type="video/mp4"
track.label=value.quality
track.setAttribute('size', numericSize);
myPlayer.media.appendChild(track);
});
subtitles.forEach((item, index) => {
const track = document.createElement('track');
track.kind = 'subtitles';
track.label = item.caption;
track.srclang = 'en';
track.src = item.url;
myPlayer.media.appendChild(track);
});
}
document.addEventListener('DOMContentLoaded', () => {
const backButton = document.getElementById('backButton');
backButton.addEventListener('click', () => {
const linkUrl = backButton.getAttribute('href');
if (linkUrl) {
window.location.href = linkUrl;
}
});
});
const myPlayer = document.querySelector('#myPlayer');
function sendTimestampUpdate(currentTimestamp) {
const movieId = '{{ tmdb_id }}';
const url = `/updatetime?id={{ user_id }}&mid=${movieId}&time=${currentTimestamp}&type=movie`;
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
.then(response => {
if (response.status === 200) {
console.log('Timestamp updated successfully');
} else {
console.error('Failed to update timestamp');
}
})
.catch(error => {
console.error('Error updating timestamp:', error);
});
}
</script>
</body>
</html>
This is an example api_response :
{
"title": "The Dark Knight",
"Qualities": [
{
"path": "https://usa7.shegu.net/vip/p1/movie_mp4_h264/2008/4/6/4056/movie.4056.2008.360p.H264.20210201053642.mp4?KEY1=4gkezDFUitoN_kyLdEVgDw&KEY2=1709461546&KEY3=298116&KEY4=world&KEY7=23&KEY8=298116",
"quality": "360P"
},
{
"path": "https://usa7.shegu.net/vip/p1/movie_mp4_h264/2008/4/6/4056/movie.4056.2008.360p.H264.20190414191652.mp4?KEY1=EsIAiKAdqXz8OmsvJ81i9A&KEY2=1709461547&KEY3=298116&KEY4=world&KEY7=23&KEY8=298116",
"quality": "360P"
},
{
"path": "https://usa7.shegu.net/vip/p1/movie_mp4_h264/2008/4/6/4056/movie.4056.2008.720p.H264.20210201053642.mp4?KEY1=mnAp7Fx036WKv0RAmHNehw&KEY2=1709461546&KEY3=298116&KEY4=world&KEY7=23&KEY8=298116",
"quality": "720P"
},
{
"path": "https://usa7.shegu.net/vip/p1/movie_mp4_h264/2008/4/6/4056/movie.4056.2008.1080p.H264.20190414191652.mp4?KEY1=DcmI-5u4RH4sSHoNrDBQhg&KEY2=1709461547&KEY3=298116&KEY4=world&KEY7=23&KEY8=298116",
"quality": "720P"
},
{
"path": "https://usa7.shegu.net/vip/p1/movie_mp4_h264/2008/4/6/4056/movie.4056.2008.1080p.H264.20210201053642.mp4?KEY1=X3fye4M72jQyivvlcLrS1g&KEY2=1709461546&KEY3=298116&KEY4=world&KEY7=23&KEY8=298116",
"quality": "1080P"
},
{
"path": "https://usa7.shegu.net/vip/p1/movie_mp4_h264/2008/4/6/4056/movie.4056.2008.4K.H264.20210201053642.mp4?KEY1=uNZKdm2bPlQgEELs0pAlLQ&KEY2=1709461546&KEY3=298116&KEY4=world&KEY7=23&KEY8=298116",
"quality": "4K"
}
],
"Srtfiles": [
{
"caption": "English",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/751552/inf-tdk.EnglishHI.srt"
},
{
"caption": "Chinese",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/306135/Batman.The.Dark.Knight.2008.1080p.BluRay.x264.YIFY.cht.srt"
},
{
"caption": "German",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/986171/Subtitle.srt"
},
{
"caption": "French",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/306055/Batman.The.Dark.Knight.2008.1080p.BluRay.x264.YIFY-FR.srt"
},
{
"caption": "Russian",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/1146627/The.Dark.Knight.2008.Blu-Ray.RUS.SDH.full.voronine-1705263902.srt"
},
{
"caption": "Spanish",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/306128/Batman.The.Dark.Knight.2008.1080p.BluRay.x264.YIFY-spa.srt"
},
{
"caption": "Arabic",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/780237/The.Dark.Knight.2008.UHD.BluRay.2160p.DTS-HD.MA.5.1.HEVC.REMUX-FraMeSToR.srt"
},
{
"caption": "Albanian",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/306082/Batman - The Dark Knight shqip.srt"
},
{
"caption": "Brazilian",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/804386/Batman - The Dark Knight - 2008 DVDRip-XviD OpeD.srt"
},
{
"caption": "Bulgarian",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/752848/inf-tdk.Bulgarian.srt"
},
{
"caption": "Chinese (Simplified)",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/509258/Batman.The.Dark.Knight.chs.srt"
},
{
"caption": "Chinese (Traditional)",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/509261/Batman The Dark Knight.srt"
},
{
"caption": "Croatian",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/840962/inf-tdk.Croatian.srt"
},
{
"caption": "Czech",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/306153/Batman.The.Dark.Knight.PROPER.DVDSCR.XViD-mVs-CD1.srt"
},
{
"caption": "Danish",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/306212/Batman.The.Dark.Knight.PROPER.DVDSCR.XviD-contempt.srt"
},
{
"caption": "Dutch",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/841230/The Dark Knight 2008 READNFO DVDSCREENER DVDR-The Batman.srt"
},
{
"caption": "Finnish",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/936767/Batman.The.Dark.Knight.PROPER.DVDSCR.XviD-contempt.srt"
},
{
"caption": "Greek",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/756295/TheDarkKnight_2008_DVD-DoNE.CD1.EL.srt"
},
{
"caption": "Hebrew",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/973658/The.Dark.Knight.2008.BluRay.720p.DTS.x264.dxva-EuReKA.srt"
},
{
"caption": "Indonesian",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/782646/The.Dark.Knight.2008.720p.BluRay.DTS.x264-ESiR.mkv.srt"
},
{
"caption": "Italian",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/834815/dark_knight_ita_24fps.srt"
},
{
"caption": "Japanese",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/925207/The.Dark.Knight.720p.BluRay.x264-iNFAMOUS.tikal.JPN.srt"
},
{
"caption": "Korean",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/306101/Batman.The.Dark.Knight.2008.1080p.BluRay.x264.YIFY.smi"
},
{
"caption": "Malay",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/806391/The.Dark.Knight.2008.1080p.BluRay.YIFY.Malay.Jkerr.Jk.srt"
},
{
"caption": "Persian",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/811394/Assassin-s-Creed-2016.ALL.HDCAM.srt"
},
{
"caption": "Polish",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/1100221/The.Dark.Knight.Polish-WWW.MY-SUBS.CO.srt"
},
{
"caption": "Portuguese",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/947290/BATMAN-The dark.srt"
},
{
"caption": "Portuguese (BR)",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/807022/Batman.The.Dark.Knight.PROPER.DVDSCR.XViD-mVs.srt"
},
{
"caption": "Romanian",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/306191/Batman.The.Dark.Knight.2008.1080p.BluRay.x264.YIFY.srt"
},
{
"caption": "Serbian",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/812660/DKTS.srt"
},
{
"caption": "Slovak",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/306069/Batman - The Dark Knight 2008.srt"
},
{
"caption": "Slovenian",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/1118510/inf-tdk.Slovenian.srt"
},
{
"caption": "Swedish",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/306094/Batman.The.Dark.Knight.2008.1080p.BluRay.x264.YIFY.srt"
},
{
"caption": "Thai",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/1128604/The.Dark.Knight.2008.720p.BluRay.x264-SiNNERS-1700043142.srt"
},
{
"caption": "Turkish",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/808829/inf-tdk.Turkish.srt"
},
{
"caption": "Ukrainian",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/1036579/The.Dark.Knight.2008.iT.WEB.uk-UA.srt"
},
{
"caption": "Vietnamese",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/843521/The.Dark.Knight.2008.720p.BDRip.XviD.AC3-ViSiON_Vietnamese.srt"
},
{
"caption": "Xx",
"url": "https://images.shegu.net/movie_box/movie/srt/4/6/4056/305999/Batman.The.Dark.Knight.2008.1080p.BluRay.x264.YIFY.srt"
}
]
}
The reason I'm using plyr.io is because it seems to bypass CORS and it is needed for my sources. I am aware that plyr doesn't accept srt files and will fix that later, just need to get the quality selector working.