Datasetpublic
SassyDiffusion/test2

title: DASH CORS Test emoji: 🎬 colorFrom: blue colorTo: indigo sdk: static pinned: false Static Space for testing DASH playback from a Hugging Face dataset repo. Edit index.html and set DEFAULT_MPD to your dataset manifest URL, or use the input box in the app.
sourceHugging Faceupdated 5mo agoView on Hugging Face
0likes11downloads
rootindex.html
index.html79 linesDownload Raw Back to root
1<!doctype html>2<html lang="en">3<head>4  <meta charset="utf-8" />5  <meta name="viewport" content="width=device-width, initial-scale=1" />6  <title>DASH CORS Test</title>7  <style>8    :root{--bg:#0f1220;--panel:#171c31;--panel2:#1d2440;--text:#ebefff;--muted:#a8b3d6;--line:#2b355e;--accent:#84a9ff;--ok:#39d39c;--warn:#ffce6a;--bad:#ff7b7b}9    *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 Inter,system-ui,sans-serif}10    .wrap{max-width:1180px;margin:0 auto;padding:24px} h1{font-size:clamp(1.8rem,3vw,2.5rem);margin:0 0 8px} p{color:var(--muted);margin:8px 0}11    .grid{display:grid;grid-template-columns:1.08fr .92fr;gap:18px}@media (max-width:960px){.grid{grid-template-columns:1fr}}12    .card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 12px 34px rgba(0,0,0,.25)}13    label{display:block;font-weight:700;margin:14px 0 6px} input,textarea{width:100%;background:#0d1430;color:var(--text);border:1px solid var(--line);border-radius:12px;padding:12px} textarea{min-height:110px;resize:vertical}14    .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} button{background:var(--accent);color:#08101f;border:0;border-radius:12px;padding:11px 14px;font-weight:700;cursor:pointer} button.secondary{background:#26355f;color:var(--text)}15    .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}@media (max-width:760px){.kpis{grid-template-columns:repeat(2,1fr)}} .kpi{background:#0d1430;border:1px solid var(--line);border-radius:12px;padding:12px}16    .v{font-size:1.08rem;font-weight:800}.ok{color:var(--ok)} .warn{color:var(--warn)} .bad{color:var(--bad)}17    pre{background:#08101f;border:1px solid var(--line);border-radius:12px;padding:14px;white-space:pre-wrap;word-break:break-word;min-height:340px;max-height:680px;overflow:auto}18    video{width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;border:1px solid var(--line)} code{background:#0d1430;padding:2px 6px;border-radius:6px}.small{font-size:.92rem;color:var(--muted)}19  </style>20</head>21<body>22  <div class="wrap">23    <h1>Hugging Face Space DASH test</h1>24    <p>This page is meant to run from a Hugging Face Static Space and test whether a DASH manifest and its segments can be played from a Hugging Face dataset repo without cross-origin failures.</p>25    <div class="grid">26      <section class="card">27        <label for="mpd">Manifest URL (.mpd)</label>28        <input id="mpd" type="url" spellcheck="false" />29        <label for="segments">Optional sample segment URLs (one per line)</label>30        <textarea id="segments" spellcheck="false"></textarea>31        <div class="row">32          <button id="testManifest">Test manifest</button>33          <button id="testSegments" class="secondary">Test segments</button>34          <button id="start" class="secondary">Start dash.js</button>35          <button id="clear" class="secondary">Clear</button>36        </div>37        <div class="kpis">38          <div class="kpi"><div class="small">Manifest</div><div id="manifestStatus" class="v">—</div></div>39          <div class="kpi"><div class="small">Segments</div><div id="segmentStatus" class="v">—</div></div>40          <div class="kpi"><div class="small">dash.js</div><div id="dashStatus" class="v">—</div></div>41          <div class="kpi"><div class="small">Video</div><div id="videoStatus" class="v">—</div></div>42        </div>43        <label for="log">Log</label>44        <pre id="log"></pre>45      </section>46      <aside class="card">47        <video id="player" controls preload="metadata"></video>48        <p class="small">Use a dataset URL like <code>https://huggingface.co/datasets/USERNAME/REPO/resolve/main/dash-h264/manifest.mpd</code>. If playback works here but not on your own domain, the issue is cross-origin policy rather than packaging.</p>49        <p class="small">Check the browser console too. dash.js may fail because of CORS, unsupported codecs, or a segment path problem.</p>50      </aside>51    </div>52  </div>53  <script src="https://cdn.dashjs.org/v5.0.3/modern/umd/dash.all.min.js"></script>54  <script>55    const DEFAULT_MPD = 'https://huggingface.co/datasets/SassyDiffusion/test2/resolve/main/dash-h264/manifest.mpd';56    const DEFAULT_SEGMENTS = [57      'https://huggingface.co/datasets/SassyDiffusion/test2/resolve/main/dash-h264/init-0.mp4',58      'https://huggingface.co/datasets/SassyDiffusion/test2/resolve/main/dash-h264/chunk-0-00001.m4s',59      'https://huggingface.co/datasets/SassyDiffusion/test2/resolve/main/dash-h264/init-1.mp4',60      'https://huggingface.co/datasets/SassyDiffusion/test2/resolve/main/dash-h264/chunk-1-00001.m4s'61    ];62    const $ = (id) => document.getElementById(id);63    const logEl = $('log'), playerEl = $('player'), manifestStatus = $('manifestStatus'), segmentStatus = $('segmentStatus'), dashStatus = $('dashStatus'), videoStatus = $('videoStatus');64    let player = null;65    $('mpd').value = DEFAULT_MPD; $('segments').value = DEFAULT_SEGMENTS.join('\n');66    function log(msg, cls=''){ const line=`[${new Date().toLocaleTimeString()}] ${msg}`; const div=document.createElement('div'); div.textContent=line; if(cls) div.className=cls; logEl.appendChild(div); logEl.scrollTop=logEl.scrollHeight; console.log(line); }67    function setStatus(el, text, cls=''){ el.textContent=text; el.className=`v ${cls}`; }68    function manifestUrl(){ return $('mpd').value.trim(); }69    function segmentUrls(){ return $('segments').value.split('\n').map(v=>v.trim()).filter(Boolean); }70    async function testManifest(){ setStatus(manifestStatus,'running','warn'); try { const res=await fetch(manifestUrl(), {mode:'cors', redirect:'follow'}); const text=await res.text(); log(`manifest status=${res.status} finalURL=${res.url}`); log(`manifest content-type=${res.headers.get('content-type')}`); log(`manifest bytes=${text.length}`); setStatus(manifestStatus, res.ok?'OK':String(res.status), res.ok?'ok':'bad'); } catch(e){ log(`manifest fetch failed: ${e.name}: ${e.message}`, 'bad'); setStatus(manifestStatus,'blocked','bad'); } }71    async function testSegments(){ const urls=segmentUrls(); setStatus(segmentStatus,'running','warn'); let ok=0; for(const url of urls){ try { const res=await fetch(url, {mode:'cors', redirect:'follow', headers:{Range:'bytes=0-1023'}}); const buf=await res.arrayBuffer(); log(`segment status=${res.status} finalURL=${res.url}`); log(`segment type=${res.headers.get('content-type')} content-range=${res.headers.get('content-range')}`); log(`segment bytes=${buf.byteLength}`); if(res.ok) ok++; } catch(e){ log(`segment fetch failed: ${e.name}: ${e.message}`, 'bad'); } } setStatus(segmentStatus, ok===urls.length?'OK':`${ok}/${urls.length}`, ok===urls.length?'ok':'warn'); }72    function resetPlayer(){ if(player){ try{ player.reset(); }catch(_){} player=null; } playerEl.pause(); playerEl.removeAttribute('src'); playerEl.load(); }73    function startDash(){ resetPlayer(); setStatus(dashStatus,'starting','warn'); setStatus(videoStatus,'waiting','warn'); const url=manifestUrl(); log(`Initializing dash.js with ${url}`); player=dashjs.MediaPlayer().create(); player.updateSettings({ debug:{ logLevel: dashjs.Debug.LOG_LEVEL_WARNING } }); player.on(dashjs.MediaPlayer.events.MANIFEST_LOADED, ()=>{ log('dash.js MANIFEST_LOADED','ok'); setStatus(dashStatus,'manifest ok','ok'); }); player.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, ()=>{ log('dash.js STREAM_INITIALIZED','ok'); setStatus(dashStatus,'stream ok','ok'); }); player.on(dashjs.MediaPlayer.events.ERROR, (e)=>{ const err=e?.error || e?.event || e; log(`dash.js ERROR ${JSON.stringify(err)}`,'bad'); setStatus(dashStatus,'error','bad'); }); playerEl.onloadedmetadata=()=>{ log(`video metadata loaded duration=${Number.isFinite(playerEl.duration)?playerEl.duration.toFixed(2):'unknown'}s`, 'ok'); setStatus(videoStatus,'metadata ok','ok'); }; playerEl.onerror=()=>{ const err=playerEl.error; log(`video error code=${err?err.code:'unknown'}`,'bad'); setStatus(videoStatus,'error','bad'); }; player.initialize(playerEl, url, false); }74    $('testManifest').addEventListener('click', testManifest); $('testSegments').addEventListener('click', testSegments); $('start').addEventListener('click', startDash); $('clear').addEventListener('click', ()=>{ logEl.textContent=''; setStatus(manifestStatus,'—'); setStatus(segmentStatus,'—'); setStatus(dashStatus,'—'); setStatus(videoStatus,'—'); resetPlayer(); });75    log('Ready. Edit the URLs if needed, then test from this Space.');76  </script>77</body>78</html>79