Spaces:
Running
Running
File size: 6,083 Bytes
b75837d 573d850 b75837d 573d850 b75837d 542c147 573d850 b75837d 573d850 b75837d 542c147 b75837d 573d850 b75837d 573d850 b75837d 573d850 b75837d 573d850 b75837d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/daydreamer-json/SomeFontRepo@main/somefontrepo.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vidstack/styles/defaults.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vidstack/styles/community-skin/video.min.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/vidstack/dist/cdn/prod.js"></script>
<style>
:root { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
:root { font-family: 'Inter var', sans-serif; }
}
body {
margin: 0;
background-color: #000000;
width: 100vw;
height: 100vh;
font-family: 'Inter', 'Noto Sans JP', sans-serif;
}
.wrapper {
height: 100vh;
display: flex;
flex-direction: column;
}
#player {
flex-grow: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
font-family: 'Inter', 'Noto Sans JP', sans-serif;
}
media-player {
--video-font-family: 'Inter', 'Noto Sans JP', sans-serif !important;
--media-buffering-size: 84px;
--media-buffering-transition: opacity 200ms ease;
--media-buffering-animation: media-buffering-spin 1.2s linear infinite;
--media-buffering-track-color: #f5f5f5;
--media-buffering-track-opacity: 0;
--media-buffering-track-width: 8;
--media-buffering-track-fill-color: #ffffff;
--media-buffering-track-fill-opacity: 0.75;
--media-buffering-track-fill-width: 9;
--media-buffering-track-fill-offset: 50;
/* --media-cue-bg: rgba(0, 0, 0, 0.8); */
--media-cue-bg: rgba(0, 0, 0, 0);
/* --media-cue-backdrop: blur(8px); */
--media-cue-backdrop: none;
}
media-captions {
/* font-family: 'SDK_JP_Web', sans-serif; */
font-family: 'Inter', 'Noto Sans JP', sans-serif;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75), -1px 1px 0 rgba(0, 0, 0, 0.75), 1px -1px 0 rgba(0, 0, 0, 0.75), -1px -1px 0 rgba(0, 0, 0, 0.75);
}
media-player:not([data-can-play]) .media-buffering-indicator,
media-player[data-waiting] .media-buffering-indicator {
opacity: 1;
}
footer.copyrightDisp {
position: fixed;
left: 0;
bottom: 0;
padding: 0;
margin: 0 0 10px 10px;
color: #ffffff80;
z-index: 2;
user-select: none;
}
</style>
</head>
<body>
<div class="wrapper">
<media-player
title=""
poster="https://singlecolorimage.com/get/000000/640x360"
aspect-ratio="16/9"
crossorigin
id="player"
>
<media-outlet id="player-media-outlet-el">
</media-outlet>
<media-community-skin></media-community-skin>
</media-player>
</div>
<script>
window.addEventListener('load', function(){
document.oncontextmenu = function () {return false;}
const player = document.querySelector('media-player');
player.onAttach(() => {
const pageUrlLocationHref = new URL(location.href);
const pageSearchParams = pageUrlLocationHref.searchParams;
if (pageSearchParams.has("url") === true && pageSearchParams.get("url") !== "") {
attachSourceToPlayer(pageSearchParams.get("url"));
if (pageSearchParams.has("subtitle") === true && pageSearchParams.get("subtitle") !== "") {
attachSubtitleSourceToPlayer(pageSearchParams.get("subtitle"));
}
} else {
const promptedUrl = prompt("Please input source URL");
if (promptedUrl === "") {
alert("Source not found");
} else {
attachSourceToPlayer(promptedUrl);
}
}
})
player.addEventListener('provider-change', (event) => {
const provider = event.detail;
if (provider?.type === 'hls') {
provider.library = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/hls.min.js';
provider.config = {
"debug": true,
"enableWorker": true,
"lowLatencyMode": true,
"backBufferLength": 90
};
window.provider = provider;
}
});
});
function attachSourceToPlayer (url) {
// Attach source URL to Vidstack Player
const outletElement = document.querySelector('#player-media-outlet-el');
const sourceElement = document.createElement("source");
sourceElement.src = url;
outletElement.appendChild(sourceElement);
// Extract and set source title from URL
// Search "filename.ext" from path string and extract "filename" (exclude ext)
player.title = url.match(/^(?:[^:\/?#]+:)?(?:\/\/[^\/?#]*)?(?:([^?#]*\/)([^\/?#]*))?(\?[^#]*)?(?:#.*)?$/)[2].match(/^(.+?)(\.[^.]+)?$/)[1];
}
function attachSubtitleSourceToPlayer (url) {
const outletElement = document.querySelector('#player-media-outlet-el');
const trackElement = document.createElement("track");
trackElement.src = url;
trackElement.kind = "subtitles";
trackElement.label = "Subtitle";
outletElement.appendChild(trackElement);
}
</script>
</body>
</html> |