teleopSample/clip.html

<!doctype html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>clip</title>
<style>
:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:#07090d;color:#e6e8ee;font:14px/1.5 -apple-system,"Helvetica Neue",Arial,"PingFang SC",sans-serif}
.bar{position:fixed;inset:0 0 auto 0;display:flex;gap:14px;align-items:center;padding:9px 14px;
     background:rgba(11,14,19,.82);backdrop-filter:blur(5px);border-bottom:1px solid #1c2028;z-index:2}
.bar a{color:#7fb2ff;text-decoration:none;font-size:13px}
.bar a:hover{text-decoration:underline}
.bar .name{color:#9aa1ad;font:12px ui-monospace,monospace;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wrap{height:100%;display:flex;align-items:center;justify-content:center;padding:52px 12px 14px}
video{max-width:100%;max-height:100%;background:#000;border-radius:6px}
</style></head><body>
<div class="bar">
  <a href="#" id="back">&larr; back</a>
  <span class="name" id="name"></span>
  <a id="dl" download>&#8681; download</a>
</div>
<div class="wrap"><video id="v" controls autoplay loop muted playsinline></video></div>
<script>
const q = new URLSearchParams(location.search);
const v = q.get('v') || '', back = q.get('back') || '', t = q.get('t') || v.split('/').pop();
document.getElementById('v').src = v;
document.getElementById('dl').href = v;
document.getElementById('dl').setAttribute('download', (t || 'clip').replace(/[^\w.-]+/g, '_') + '.mp4');
document.getElementById('name').textContent = t;
document.title = t || 'clip';
document.getElementById('back').onclick = e => {
  e.preventDefault();
  if (back) location.href = back;
  else if (history.length > 1) history.back();
  else location.href = 'index.html';
};
</script>
</body></html>