Spaces:

daydreamer-json
/

hp

Running

App Files Files Community

daydreamer-json commited on Nov 20, 2023

Commit

2e90335

verified ·

1 Parent(s): 573d850

Edit vidstack.html

Browse files

Files changed (4) hide show

256x144.png +0 -0
plyr_test_0002.html +163 -0
plyr_test_0003.html +43 -0
vidstack.html +80 -50

256x144.png ADDED Viewed

plyr_test_0002.html ADDED Viewed

	@@ -0,0 +1,163 @@

+<!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="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">
+    <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
+    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
+    <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, .plyr {
+        flex-grow: 1;
+        height: 100%;
+        width: 100%;
+      }
+      footer.copyrightDisp {
+        display: none;
+        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">
+      <video id="player" playsinline controls>
+      </video>
+    </div>
+    <footer class="copyrightDisp">
+      Resources are created for research purposes.<br>
+      (C) 2023 Tappei Nagatsuki, KADOKAWA, daydreamer-json
+    </footer>
+    <script>
+      const plyrOptions = {
+        enabled: true,
+        debug: false,
+        controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
+        settings: ['captions', 'quality', 'speed', 'loop'],
+        blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
+        autoplay: false,
+        autopause: true,
+        playsinline: true,
+        volume: 1,
+        muted: false,
+        clickToPlay: true,
+        disableContextMenu: true,
+        hideControls: true,
+        resetOnEnd: false,
+        keyboard: { focused: true, global: false },
+        tooltips: { controls: true, seek: true },
+        displayDuration: true,
+        invertTime: true,
+        toggleInvert: true,
+        captions: { active: false, language: 'auto', update: false },
+        fullscreen: { enabled: true, fallback: true, iosNative: false, container: null },
+        storage: { enabled: true, key: 'plyr' },
+        speed: { selected: 1, options: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4] },
+        quality: { default: 1080, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240, 144] },
+        loop: { active: false },
+        previewThumbnails: { enabled: false, src: '' },
+        mediaMetadata: { title: '', artist: '', album: '', artwork: [] },
+        title: '',
+        i18n: {
+          "restart": "再起動",
+          "rewind": "{seektime}秒戻る",
+          "play": "再生",
+          "pause": "一時停止",
+          "fastForward": "{seektime}秒進む",
+          "seek": "シーク",
+          "seekLabel": "{currentTime} / {duration}",
+          "played": "再生中",
+          "buffered": "読み込み中",
+          "currentTime": "再生位置",
+          "duration": "長さ",
+          "volume": "音量",
+          "mute": "ミュート",
+          "unmute": "ミュート解除",
+          "enableCaptions": "字幕オン",
+          "disableCaptions": "字幕オフ",
+          "download": "ダウンロード",
+          "enterFullscreen": "全画面表示",
+          "exitFullscreen": "全画面表示を終了",
+          "frameTitle": "{title}",
+          "captions": "字幕",
+          "settings": "設定",
+          "pip": "ピクチャインピクチャ",
+          "menuBack": "前のメニューに戻る",
+          "speed": "速度",
+          "normal": "標準",
+          "quality": "画質",
+          "loop": "ループ",
+          "start": "開始",
+          "end": "終了",
+          "all": "すべて",
+          "reset": "リセット",
+          "disabled": "無効",
+          "enabled": "有効",
+          "advertisement": "広告",
+          "qualityBadge": {
+            "2160": "4K",
+            "1440": "HD",
+            "1080": "HD",
+            "720": "HD",
+            "576": "SD",
+            "480": "SD"
+          }
+        }
+      };
+      const player = new Plyr('#player', plyrOptions);
+      const videoFileName = 'Cs_LQ1101502_ShenheBattle_Girl';
+      player.source = {
+        type: 'video',
+        title: 're_zero_s2_sp_nc_op',
+        sources: [
+          {
+            src: `https://huggingface.co/datasets/DeliberatorArchiver/gi_cutscn_new_mux/resolve/main/media/mux/variant/hevc_240p_aac_128k/${videoFileName}.mp4`,
+            size: 240,
+          },
+          {
+            src: `https://huggingface.co/datasets/DeliberatorArchiver/gi_cutscn_new_mux/resolve/main/media/mux/variant/hevc_360p_aac_128k/${videoFileName}.mp4`,
+            size: 360,
+          },
+          {
+            src: `https://huggingface.co/datasets/DeliberatorArchiver/gi_cutscn_new_mux/resolve/main/media/mux/variant/hevc_480p_aac_128k/${videoFileName}.mp4`,
+            size: 480,
+          },
+          {
+            src: `https://huggingface.co/datasets/DeliberatorArchiver/gi_cutscn_new_mux/resolve/main/media/mux/variant/hevc_720p_aac_256k/${videoFileName}.mp4`,
+            size: 720,
+          },
+          {
+            src: `https://huggingface.co/datasets/DeliberatorArchiver/gi_cutscn_new_mux/resolve/main/media/mux/variant/hevc_1080p_aac_256k/${videoFileName}.mp4`,
+            size: 1080,
+          }
+        ]
+      };
+    </script>
+  </body>
+</html>

plyr_test_0003.html ADDED Viewed

	@@ -0,0 +1,43 @@

+<!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="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">
+    <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;
+        height: 100%;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="wrapper">
+      <video id="player" playsinline controls src="https://huggingface.co/datasets/DeliberatorArchiver/gi_cutscn_new_mux/resolve/main/media/mux/variant/hevc_1080p_aac_256k/Cs_LQ1101502_ShenheBattle_Girl.mp4">
+      </video>
+    </div>
+    <script>
+    </script>
+  </body>
+</html>

vidstack.html CHANGED Viewed

@@ -9,9 +9,11 @@
     <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) {
@@ -36,33 +38,35 @@
         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;
@@ -79,37 +83,69 @@
     <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') {
@@ -125,13 +161,7 @@
         });
       });
       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) {

     <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@^1.0.0/player/styles/default/theme.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vidstack@^1.0.0/player/styles/default/layouts/video.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/vidstack@^1.0.0/cdn/with-layouts/vidstack.js" type="module"></script>
+    <script src='https://unpkg.com/bignumber.js'></script>
+    <script src='https://unpkg.com/cbor-web'></script>
     <style>
       :root { font-family: 'Inter', sans-serif; }
       @supports (font-variation-settings: normal) {
         height: 100%;
         width: 100%;
         font-family: 'Inter', 'Noto Sans JP', sans-serif;
+        overflow: hidden;
       }
+      .vds-video-layout {
         --video-font-family: 'Inter', 'Noto Sans JP', sans-serif !important;
+        --video-border-radius: 0px !important;
+        --video-border: 0px !important;
+      }
+      :where([data-media-provider], video, media-poster) {
+        border-radius: var(--video-border-radius);
+        border: var(--video-border);
+      }
+      :where([data-media-player][data-view-type=video]:not([data-fullscreen])) {
+        border-radius: var(--video-border-radius);
+        border: var(--video-border);
+      }
+      :where([data-media-player][data-view-type=video]) {
+        border-radius: var(--video-border-radius);
+        border: var(--video-border);
+      }
+      [data-media-provider] video {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
       }
       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);
       }
       footer.copyrightDisp {
         position: fixed;
         left: 0;
     <div class="wrapper">
       <media-player
         title=""
         aspect-ratio="16/9"
         crossorigin
         id="player"
       >
+        <media-provider id="player-media-outlet-el">
+        </media-provider>
+        <media-audio-layout></media-audio-layout>
+        <media-video-layout></media-video-layout>
       </media-player>
     </div>
     <script>
+      window.addEventListener('load', async function(){
+        // const cbor = require('cbor-web');
+        window.uiTranslation = {
+          "ja-JP": {
+            "Audio": "音声",
+            "Auto": "自動",
+            "Captions": "字幕",
+            "Chapters": "チャプター",
+            "Default": "既定",
+            "Mute": "ミュート",
+            "Normal": "標準",
+            "Off": "オフ",
+            "Pause": "一時停止",
+            "Play": "再生",
+            "Speed": "速度",
+            "Quality": "画質",
+            "Settings": "設定",
+            "Unmute": "ミュート解除",
+            "Seek Forward": "進む",
+            "Seek Backward": "戻る",
+            "Closed-Captions On": "字幕オン",
+            "Closed-Captions Off": "字幕オフ",
+            "Enter Fullscreen": "全画面表示",
+            "Exit Fullscreen": "全画��表示を終了",
+            "Enter PiP": "PiP",
+            "Exit PiP": "PiPを終了"
+          }
+        };
+        // uiTranslation.cbor.ja = atob(uiTranslation.base64.ja);
+        // uiTranslation.json.ja = await cbor.decodeFirst(uiTranslation.cbor.ja);
         document.oncontextmenu = function () {return false;}
+        window.player = document.querySelector('media-player');
+        for (let i = 0; i < Object.keys(uiTranslation).length; i++) {
+          if (window.navigator.language == Object.keys(uiTranslation)[i]) {
+            document.querySelector('media-video-layout').translations = uiTranslation[Object.keys(uiTranslation)[i]];
+          }
+        }
+        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') {
         });
       });
       function attachSourceToPlayer (url) {
+        player.src = url;
         player.title = url.match(/^(?:[^:\/?#]+:)?(?:\/\/[^\/?#]*)?(?:([^?#]*\/)([^\/?#]*))?(\?[^#]*)?(?:#.*)?$/)[2].match(/^(.+?)(\.[^.]+)?$/)[1];
       }
       function attachSubtitleSourceToPlayer (url) {