mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-11-06 07:28:53 -05:00
try vertical video
This commit is contained in:
Yiannis Christodoulou
parent
67bc60066c
commit
c4a3e3f383
@ -196,9 +196,9 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
|
|||||||
author_name: 'Markos Gogoulos',
|
author_name: 'Markos Gogoulos',
|
||||||
author_profile: '/user/markos/',
|
author_profile: '/user/markos/',
|
||||||
author_thumbnail: '/media/userlogos/user.jpg',
|
author_thumbnail: '/media/userlogos/user.jpg',
|
||||||
url: 'https://demo.mediacms.io/view?m=elygiagorgechania',
|
url: 'https://videojs.mediacms.io/view?m=2Uk08Il5u',
|
||||||
poster_url:
|
poster_url:
|
||||||
'/media/original/thumbnails/user/markos/c1ab03cab3bb46b5854a5e217cfe3013_3mGZ15f.VID_20230813_144422.mp4.jpg',
|
'/media/original/thumbnails/user/markos/db52140de7204022a1e5f08e078b4ec6_VKPTF4v.UniversityofCopenhagenMærskTower.mp4.jpg',
|
||||||
___chapter_data: [],
|
___chapter_data: [],
|
||||||
chapter_data: [
|
chapter_data: [
|
||||||
{
|
{
|
||||||
@ -216,8 +216,8 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
|
|||||||
related_media: [
|
related_media: [
|
||||||
{
|
{
|
||||||
friendly_token: 'dktSm7iEo',
|
friendly_token: 'dktSm7iEo',
|
||||||
url: 'https://demo.mediacms.io/view?m=dktSm7iEo',
|
url: 'https://videojs.mediacms.io/view?m=dktSm7iEo',
|
||||||
api_url: 'https://demo.mediacms.io/api/v1/media/dktSm7iEo',
|
api_url: 'https://videojs.mediacms.io/api/v1/media/dktSm7iEo',
|
||||||
user: 'markos',
|
user: 'markos',
|
||||||
title: 'Sed aliquam consectetur dolor.',
|
title: 'Sed aliquam consectetur dolor.',
|
||||||
description:
|
description:
|
||||||
@ -1100,13 +1100,14 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
|
|||||||
state: 'public',
|
state: 'public',
|
||||||
duration: 11,
|
duration: 11,
|
||||||
thumbnail_url:
|
thumbnail_url:
|
||||||
'https://demo.mediacms.io/media/original/thumbnails/user/markos/32e2cf3ff5fe498da93251034e977d9c.20240527_090548.mp4_qiF5S9H.jpg',
|
'https://videojs.mediacms.io/media/original/thumbnails/user/markos/db52140de7204022a1e5f08e078b4ec6_02xAHoZ.UniversityofCopenhagenMærskTower.mp4.jpg',
|
||||||
is_reviewed: true,
|
is_reviewed: true,
|
||||||
preview_url:
|
preview_url:
|
||||||
'https://demo.mediacms.io/media/encoded/1/markos/32e2cf3ff5fe498da93251034e977d9c.tmpheuxmj3y.gif',
|
'https://videojs.mediacms.io/media/encoded/1/markos/db52140de7204022a1e5f08e078b4ec6.tmpuespp_ik.gif',
|
||||||
author_name: 'Markos Gogoulos',
|
author_name: 'Markos Gogoulos',
|
||||||
author_profile: 'https://demo.mediacms.io/user/markos/',
|
author_profile: 'https://videojs.mediacms.io/user/markos/',
|
||||||
author_thumbnail: 'https://demo.mediacms.io/media/userlogos/2024/10/02/markos.jpeg',
|
author_thumbnail:
|
||||||
|
'https://videojs.mediacms.io/media/userlogos/2024/10/02/markos.jpeg',
|
||||||
encoding_status: 'success',
|
encoding_status: 'success',
|
||||||
likes: 14,
|
likes: 14,
|
||||||
dislikes: 1,
|
dislikes: 1,
|
||||||
@ -1120,9 +1121,22 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
|
|||||||
// VIDEO
|
// VIDEO
|
||||||
media_type: 'video',
|
media_type: 'video',
|
||||||
original_media_url:
|
original_media_url:
|
||||||
'/media/original/user/markos/f371a6b2c157451d924bc4f612bf2667.Pexels_Videos_2079217_1.mp4',
|
'/media/original/user/markos/db52140de7204022a1e5f08e078b4ec6.UniversityofCopenhagenMærskTower.mp4',
|
||||||
|
_hls_info: {
|
||||||
hls_info: {
|
master_file: '/media/hls/5073e97457004961a163c5b504e2d7e8/master.m3u8',
|
||||||
|
'240_iframe': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-1/iframes.m3u8',
|
||||||
|
'480_iframe': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-2/iframes.m3u8',
|
||||||
|
'720_iframe': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-3/iframes.m3u8',
|
||||||
|
'144_iframe': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-4/iframes.m3u8',
|
||||||
|
'360_iframe': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-5/iframes.m3u8',
|
||||||
|
'240_playlist': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-1/stream.m3u8',
|
||||||
|
'480_playlist': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-2/stream.m3u8',
|
||||||
|
'720_playlist': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-3/stream.m3u8',
|
||||||
|
'144_playlist': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-4/stream.m3u8',
|
||||||
|
'360_playlist': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-5/stream.m3u8',
|
||||||
|
},
|
||||||
|
hls_info: {},
|
||||||
|
/* hls_info: {
|
||||||
master_file: '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/master.m3u8',
|
master_file: '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/master.m3u8',
|
||||||
'240_iframe': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-1/iframes.m3u8',
|
'240_iframe': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-1/iframes.m3u8',
|
||||||
'480_iframe': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-2/iframes.m3u8',
|
'480_iframe': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-2/iframes.m3u8',
|
||||||
@ -1134,70 +1148,130 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
|
|||||||
'1080_playlist': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-3/stream.m3u8',
|
'1080_playlist': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-3/stream.m3u8',
|
||||||
'360_playlist': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-4/stream.m3u8',
|
'360_playlist': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-4/stream.m3u8',
|
||||||
'720_playlist': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-5/stream.m3u8',
|
'720_playlist': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-5/stream.m3u8',
|
||||||
},
|
|
||||||
|
|
||||||
/* hls_info: {
|
|
||||||
master_file: '/media/hls/f371a6b2c157451d924bc4f612bf2667/master.m3u8',
|
|
||||||
'1080_iframe': '/media/hls/f371a6b2c157451d924bc4f612bf2667/media-1/iframes.m3u8',
|
|
||||||
'720_iframe': '/media/hls/f371a6b2c157451d924bc4f612bf2667/media-2/iframes.m3u8',
|
|
||||||
'480_iframe': '/media/hls/f371a6b2c157451d924bc4f612bf2667/media-3/iframes.m3u8',
|
|
||||||
'360_iframe': '/media/hls/f371a6b2c157451d924bc4f612bf2667/media-4/iframes.m3u8',
|
|
||||||
'240_iframe': '/media/hls/f371a6b2c157451d924bc4f612bf2667/media-5/iframes.m3u8',
|
|
||||||
'1080_playlist': '/media/hls/f371a6b2c157451d924bc4f612bf2667/media-1/stream.m3u8',
|
|
||||||
'720_playlist': '/media/hls/f371a6b2c157451d924bc4f612bf2667/media-2/stream.m3u8',
|
|
||||||
'480_playlist': '/media/hls/f371a6b2c157451d924bc4f612bf2667/media-3/stream.m3u8',
|
|
||||||
'360_playlist': '/media/hls/f371a6b2c157451d924bc4f612bf2667/media-4/stream.m3u8',
|
|
||||||
'240_playlist': '/media/hls/f371a6b2c157451d924bc4f612bf2667/media-5/stream.m3u8',
|
|
||||||
}, */
|
}, */
|
||||||
encodings_info: {
|
/* encodings_info: {
|
||||||
144: {},
|
144: {
|
||||||
|
h264: {
|
||||||
|
title: 'h264-144',
|
||||||
|
url: '/media/encoded/23/admin/c4e70c90cc004d6aab2204a057787b17.c4e70c90cc004d6aab2204a057787b17.20233414hd_2048_1080_30fps.mp4.mp4',
|
||||||
|
progress: 100,
|
||||||
|
size: '0.8MB',
|
||||||
|
encoding_id: 245,
|
||||||
|
status: 'success',
|
||||||
|
},
|
||||||
|
},
|
||||||
240: {
|
240: {
|
||||||
h264: {
|
h264: {
|
||||||
title: 'h264-240',
|
title: 'h264-240',
|
||||||
url: '/media/encoded/2/markos/c1ab03cab3bb46b5854a5e217cfe3013.c1ab03cab3bb46b5854a5e217cfe3013.VID_20230813_144422.mp4.mp4',
|
url: '/media/encoded/2/admin/c4e70c90cc004d6aab2204a057787b17.c4e70c90cc004d6aab2204a057787b17.20233414hd_2048_1080_30fps.mp4.mp4',
|
||||||
progress: 100,
|
progress: 100,
|
||||||
size: '2.2MB',
|
size: '2.0MB',
|
||||||
encoding_id: 4940,
|
encoding_id: 246,
|
||||||
status: 'success',
|
status: 'success',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
360: {
|
360: {
|
||||||
h264: {
|
h264: {
|
||||||
title: 'h264-360',
|
title: 'h264-360',
|
||||||
url: '/media/encoded/3/markos/c1ab03cab3bb46b5854a5e217cfe3013.c1ab03cab3bb46b5854a5e217cfe3013.VID_20230813_144422.mp4.mp4',
|
url: '/media/encoded/3/admin/c4e70c90cc004d6aab2204a057787b17.c4e70c90cc004d6aab2204a057787b17.20233414hd_2048_1080_30fps.mp4.mp4',
|
||||||
progress: 100,
|
progress: 100,
|
||||||
size: '3.3MB',
|
size: '3.5MB',
|
||||||
encoding_id: 4941,
|
encoding_id: 247,
|
||||||
status: 'success',
|
status: 'success',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
480: {
|
480: {
|
||||||
h264: {
|
h264: {
|
||||||
title: 'h264-480',
|
title: 'h264-480',
|
||||||
url: '/media/encoded/13/markos/c1ab03cab3bb46b5854a5e217cfe3013.c1ab03cab3bb46b5854a5e217cfe3013.VID_20230813_144422.mp4.mp4',
|
url: '/media/encoded/13/admin/c4e70c90cc004d6aab2204a057787b17.c4e70c90cc004d6aab2204a057787b17.20233414hd_2048_1080_30fps.mp4.mp4',
|
||||||
progress: 100,
|
progress: 100,
|
||||||
size: '6.0MB',
|
size: '7.0MB',
|
||||||
encoding_id: 4942,
|
encoding_id: 248,
|
||||||
status: 'success',
|
status: 'success',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
720: {
|
720: {
|
||||||
h264: {
|
h264: {
|
||||||
title: 'h264-720',
|
title: 'h264-720',
|
||||||
url: '/media/encoded/10/markos/c1ab03cab3bb46b5854a5e217cfe3013.c1ab03cab3bb46b5854a5e217cfe3013.VID_20230813_144422.mp4.mp4',
|
url: '/media/encoded/10/admin/c4e70c90cc004d6aab2204a057787b17.c4e70c90cc004d6aab2204a057787b17.20233414hd_2048_1080_30fps.mp4.mp4',
|
||||||
progress: 100,
|
progress: 100,
|
||||||
size: '17.8MB',
|
size: '15.1MB',
|
||||||
encoding_id: 4943,
|
encoding_id: 249,
|
||||||
status: 'success',
|
status: 'success',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
1080: {
|
1080: {
|
||||||
h264: {
|
h264: {
|
||||||
title: 'h264-1080',
|
title: 'h264-1080',
|
||||||
url: '/media/encoded/7/markos/c1ab03cab3bb46b5854a5e217cfe3013.c1ab03cab3bb46b5854a5e217cfe3013.VID_20230813_144422.mp4.mp4',
|
url: '/media/encoded/7/admin/c4e70c90cc004d6aab2204a057787b17.c4e70c90cc004d6aab2204a057787b17.20233414hd_2048_1080_30fps.mp4.mp4',
|
||||||
progress: 100,
|
progress: 100,
|
||||||
size: '37.2MB',
|
size: '27.5MB',
|
||||||
encoding_id: 4944,
|
encoding_id: 250,
|
||||||
|
status: 'success',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
1440: {},
|
||||||
|
2160: {},
|
||||||
|
}, */
|
||||||
|
encodings_info: {},
|
||||||
|
___encodings_info: {
|
||||||
|
144: {
|
||||||
|
h264: {
|
||||||
|
title: 'h264-144',
|
||||||
|
url: '/media/encoded/23/markos/db52140de7204022a1e5f08e078b4ec6.db52140de7204022a1e5f08e078b4ec6.UniversityofCopenhagenMærskTower.mp4.mp4',
|
||||||
|
progress: 100,
|
||||||
|
size: '0.9MB',
|
||||||
|
encoding_id: 84,
|
||||||
|
status: 'success',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
240: {
|
||||||
|
h264: {
|
||||||
|
title: 'h264-240',
|
||||||
|
url: '/media/encoded/2/markos/db52140de7204022a1e5f08e078b4ec6.db52140de7204022a1e5f08e078b4ec6.UniversityofCopenhagenMærskTower.mp4.mp4',
|
||||||
|
progress: 100,
|
||||||
|
size: '1.7MB',
|
||||||
|
encoding_id: 85,
|
||||||
|
status: 'success',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
360: {
|
||||||
|
h264: {
|
||||||
|
title: 'h264-360',
|
||||||
|
url: '/media/encoded/3/markos/db52140de7204022a1e5f08e078b4ec6.db52140de7204022a1e5f08e078b4ec6.UniversityofCopenhagenMærskTower.mp4.mp4',
|
||||||
|
progress: 100,
|
||||||
|
size: '2.9MB',
|
||||||
|
encoding_id: 86,
|
||||||
|
status: 'success',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
480: {
|
||||||
|
h264: {
|
||||||
|
title: 'h264-480',
|
||||||
|
url: '/media/encoded/13/markos/db52140de7204022a1e5f08e078b4ec6.db52140de7204022a1e5f08e078b4ec6.UniversityofCopenhagenMærskTower.mp4.mp4',
|
||||||
|
progress: 100,
|
||||||
|
size: '4.5MB',
|
||||||
|
encoding_id: 87,
|
||||||
|
status: 'success',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
720: {
|
||||||
|
h264: {
|
||||||
|
title: 'h264-720',
|
||||||
|
url: '/media/encoded/10/markos/db52140de7204022a1e5f08e078b4ec6.db52140de7204022a1e5f08e078b4ec6.UniversityofCopenhagenMærskTower.mp4.mp4',
|
||||||
|
progress: 100,
|
||||||
|
size: '8.3MB',
|
||||||
|
encoding_id: 88,
|
||||||
|
status: 'success',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
1080: {
|
||||||
|
h264: {
|
||||||
|
title: 'h264-1080',
|
||||||
|
url: '/media/encoded/7/markos/db52140de7204022a1e5f08e078b4ec6.db52140de7204022a1e5f08e078b4ec6.UniversityofCopenhagenMærskTower.mp4.mp4',
|
||||||
|
progress: 100,
|
||||||
|
size: '16.6MB',
|
||||||
|
encoding_id: 89,
|
||||||
status: 'success',
|
status: 'success',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -1217,11 +1291,11 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
|
|||||||
useRoundedCorners: true,
|
useRoundedCorners: true,
|
||||||
isPlayList: false,
|
isPlayList: false,
|
||||||
previewSprite: {
|
previewSprite: {
|
||||||
url: 'https://demo.mediacms.io/media/original/thumbnails/user/markos/c1ab03cab3bb46b5854a5e217cfe3013.VID_20230813_144422.mp4sprites.jpg',
|
url: 'https://videojs.mediacms.io/media/original/thumbnails/user/admin/43cc73a8c1604425b7057ad2b50b1798.19247660hd_1920_1080_60fps.mp4sprites.jpg',
|
||||||
frame: { width: 160, height: 90, seconds: 10 },
|
frame: { width: 160, height: 90, seconds: 10 },
|
||||||
},
|
},
|
||||||
siteUrl: 'https://demo.mediacms.io',
|
siteUrl: 'https://videojs.mediacms.io',
|
||||||
nextLink: 'https://demo.mediacms.io/view?m=elygiagorgechania',
|
nextLink: 'https://videojs.mediacms.io/view?m=elygiagorgechania',
|
||||||
urlAutoplay: true,
|
urlAutoplay: true,
|
||||||
urlMuted: false,
|
urlMuted: false,
|
||||||
},
|
},
|
||||||
@ -1422,6 +1496,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
|
|||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log('userQuality', userQuality);
|
||||||
// If user has selected a specific quality, try to use that playlist
|
// If user has selected a specific quality, try to use that playlist
|
||||||
if (userQuality !== 'auto') {
|
if (userQuality !== 'auto') {
|
||||||
const qualityKey = `${userQuality.replace('p', '')}_playlist`;
|
const qualityKey = `${userQuality.replace('p', '')}_playlist`;
|
||||||
@ -1452,7 +1527,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
|
|||||||
if (mediaData.data?.encodings_info) {
|
if (mediaData.data?.encodings_info) {
|
||||||
const encodings = mediaData.data.encodings_info;
|
const encodings = mediaData.data.encodings_info;
|
||||||
const userQuality = userQualityPreference;
|
const userQuality = userQualityPreference;
|
||||||
|
console.log('userQuality edw', userQuality);
|
||||||
// If user has selected a specific quality, try to use that encoding first
|
// If user has selected a specific quality, try to use that encoding first
|
||||||
if (userQuality !== 'auto') {
|
if (userQuality !== 'auto') {
|
||||||
const qualityNumber = userQuality.replace('p', ''); // Remove 'p' from '240p' -> '240'
|
const qualityNumber = userQuality.replace('p', ''); // Remove 'p' from '240p' -> '240'
|
||||||
@ -1461,6 +1536,12 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
|
|||||||
encodings[qualityNumber].h264 &&
|
encodings[qualityNumber].h264 &&
|
||||||
encodings[qualityNumber].h264.url
|
encodings[qualityNumber].h264.url
|
||||||
) {
|
) {
|
||||||
|
console.log(' encodings[qualityNumber].h264.url', encodings[qualityNumber].h264.url);
|
||||||
|
console.log(
|
||||||
|
' getMimeType(encodings[qualityNumber].h264.url, mediaData.data?.media_type)',
|
||||||
|
getMimeType(encodings[qualityNumber].h264.url, mediaData.data?.media_type)
|
||||||
|
);
|
||||||
|
console.log('label', `${qualityNumber}p`);
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
src: encodings[qualityNumber].h264.url,
|
src: encodings[qualityNumber].h264.url,
|
||||||
@ -1479,8 +1560,10 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
|
|||||||
.filter((quality) => encodings[quality] && encodings[quality].h264 && encodings[quality].h264.url)
|
.filter((quality) => encodings[quality] && encodings[quality].h264 && encodings[quality].h264.url)
|
||||||
.sort((a, b) => parseInt(b) - parseInt(a)); // Sort descending (highest first)
|
.sort((a, b) => parseInt(b) - parseInt(a)); // Sort descending (highest first)
|
||||||
|
|
||||||
|
console.log('availableQualities', availableQualities);
|
||||||
for (const quality of availableQualities) {
|
for (const quality of availableQualities) {
|
||||||
const sourceUrl = encodings[quality].h264.url;
|
const sourceUrl = encodings[quality].h264.url;
|
||||||
|
console.log('sourceUrl', sourceUrl);
|
||||||
sources.push({
|
sources.push({
|
||||||
src: sourceUrl,
|
src: sourceUrl,
|
||||||
type: getMimeType(sourceUrl, mediaData.data?.media_type),
|
type: getMimeType(sourceUrl, mediaData.data?.media_type),
|
||||||
@ -1496,6 +1579,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
|
|||||||
// Final fallback to original media URL or sample video
|
// Final fallback to original media URL or sample video
|
||||||
if (mediaData.data?.original_media_url) {
|
if (mediaData.data?.original_media_url) {
|
||||||
const sourceUrl = mediaData.siteUrl + mediaData.data.original_media_url;
|
const sourceUrl = mediaData.siteUrl + mediaData.data.original_media_url;
|
||||||
|
console.log('sourceUrl', sourceUrl);
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
src: sourceUrl,
|
src: sourceUrl,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user