🎮ArcadeLab

Video Arcade

by LunarGalaxy87
261 lines7.1 KB
▶ Play
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Arcade</title>
<style>
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: -apple-system, sans-serif;
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    color: #fff;
    min-height: 100vh;
    padding: 16px;
  }
  h1 {
    text-align: center;
    font-size: 22px;
    margin: 8px 0 16px;
    letter-spacing: 1px;
  }
  .url-bar {
    display: flex;
    gap: 8px;
    max-width: 700px;
    margin: 0 auto 16px;
  }
  .url-bar input {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: none;
    font-size: 15px;
  }
  .url-bar button {
    padding: 12px 18px;
    border-radius: 10px;
    border: none;
    background: #6c5ce7;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
  }
  .player-wrap {
    max-width: 700px;
    margin: 0 auto;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  }
  video, iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }
  .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #aaa;
    font-size: 15px;
    text-align: center;
    padding: 20px;
  }
  .controls {
    max-width: 700px;
    margin: 14px auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .controls button {
    padding: 10px 14px;
    border-radius: 8px;
    border: none;
    background: #2d2d44;
    color: #fff;
    font-size: 14px;
  }
  .score {
    text-align: center;
    margin-top: 10px;
    font-size: 15px;
    color: #ffd166;
  }
  .err {
    color: #ff7675;
    text-align: center;
    font-size: 13px;
    max-width: 700px;
    margin: 6px auto;
  }
</style>
</head>
<body>

<h1>🎬 Video Arcade</h1>

<div class="url-bar">
  <input id="urlInput" type="text" placeholder="Paste a video URL (YouTube or .mp4 link)">
  <button onclick="loadVideo()">Load</button>
</div>
<div class="url-bar">
  <input id="videoFileInput" type="file" accept="video/*" style="flex:1; padding:10px; border-radius:10px; border:none; background:#fff; color:#000; font-size:14px;">
  <button onclick="loadVideoFile()">Load File</button>
</div>
<div class="err" id="errMsg"></div>

<div class="url-bar">
  <input id="audioInput" type="text" placeholder="Paste an audio URL (.mp3, .wav, .ogg)">
  <button onclick="loadAudio()">Load</button>
</div>
<div class="url-bar">
  <input id="audioFileInput" type="file" accept="audio/*" style="flex:1; padding:10px; border-radius:10px; border:none; background:#fff; color:#000; font-size:14px;">
  <button onclick="loadAudioFile()">Load File</button>
</div>
<div class="err" id="audioErrMsg"></div>

<div class="player-wrap" id="audioWrap" style="aspect-ratio:auto; height:70px; display:flex; align-items:center; justify-content:center; padding:0 10px;">
  <div class="placeholder" id="audioPlaceholder" style="padding:0; font-size:13px;">No audio loaded — paste a URL above.</div>
</div>

<div class="player-wrap" id="playerWrap">
  <div class="placeholder" id="placeholder">No video loaded yet — paste a URL above, or hit "Load Sample" below.</div>
</div>

<div class="controls">
  <button onclick="loadSample()">Load Sample Video</button>
  <button onclick="playPause()">▶️ Play / Pause</button>
  <button onclick="addPoint()">+ Point (watch game)</button>
  <button onclick="clearVideo()">Clear</button>
</div>

<div class="score">Points: <span id="points">0</span></div>

<script>
let points = 0;

function getYouTubeId(url) {
  const patterns = [
    /youtu\.be\/([a-zA-Z0-9_-]{6,})/,
    /youtube\.com\/watch\?v=([a-zA-Z0-9_-]{6,})/,
    /youtube\.com\/embed\/([a-zA-Z0-9_-]{6,})/,
    /youtube\.com\/shorts\/([a-zA-Z0-9_-]{6,})/
  ];
  for (const p of patterns) {
    const m = url.match(p);
    if (m) return m[1];
  }
  return null;
}

function setError(msg) {
  document.getElementById('errMsg').textContent = msg || '';
}

function loadVideo() {
  const url = document.getElementById('urlInput').value.trim();
  const wrap = document.getElementById('playerWrap');
  setError('');

  if (!url) {
    setError('Paste a URL first, bro.');
    return;
  }

  const ytId = getYouTubeId(url);

  try {
    if (ytId) {
      wrap.innerHTML = `<iframe src="https://www.youtube.com/embed/${ytId}?autoplay=1&playsinline=1" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen></iframe>`;
    } else if (/\.(mp4|webm|ogg|mov)(\?.*)?$/i.test(url)) {
      wrap.innerHTML = `<video id="mainVideo" controls autoplay playsinline src="${url}"></video>`;
    } else {
      // fallback: try iframe embed anyway (works for many hosted players)
      wrap.innerHTML = `<iframe src="${url}" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen></iframe>`;
      setError('Note: this isn\'t a recognized YouTube or direct video link — tried loading it as an embed. If it looks blank, the site may block embedding.');
    }
  } catch (e) {
    setError('Could not load that video.');
  }
}

function loadAudio() {
  const url = document.getElementById('audioInput').value.trim();
  const wrap = document.getElementById('audioWrap');
  const errEl = document.getElementById('audioErrMsg');
  errEl.textContent = '';

  if (!url) {
    errEl.textContent = 'Paste an audio URL first, bro.';
    return;
  }

  wrap.innerHTML = `<audio id="mainAudio" controls autoplay style="width:100%;" src="${url}"></audio>`;
}

function loadAudioFile() {
  const fileInput = document.getElementById('audioFileInput');
  const wrap = document.getElementById('audioWrap');
  const errEl = document.getElementById('audioErrMsg');
  errEl.textContent = '';

  const file = fileInput.files[0];
  if (!file) {
    errEl.textContent = 'Pick a file first, bro.';
    return;
  }

  const objectUrl = URL.createObjectURL(file);
  wrap.innerHTML = `<audio id="mainAudio" controls autoplay style="width:100%;" src="${objectUrl}"></audio>`;
}

function loadVideoFile() {
  const fileInput = document.getElementById('videoFileInput');
  const wrap = document.getElementById('playerWrap');
  setError('');

  const file = fileInput.files[0];
  if (!file) {
    setError('Pick a file first, bro.');
    return;
  }

  const objectUrl = URL.createObjectURL(file);
  wrap.innerHTML = `<video id="mainVideo" controls autoplay playsinline src="${objectUrl}"></video>`;
}

function loadSample() {
  document.getElementById('urlInput').value = 'https://www.w3schools.com/html/mov_bbb.mp4';
  loadVideo();
}

function playPause() {
  const v = document.getElementById('mainVideo');
  if (!v) { setError('Load a direct .mp4 video first to use play/pause (YouTube embeds control themselves).'); return; }
  if (v.paused) v.play(); else v.pause();
}

function clearVideo() {
  document.getElementById('playerWrap').innerHTML = '<div class="placeholder" id="placeholder">No video loaded — paste a URL above.</div>';
  document.getElementById('urlInput').value = '';
  setError('');
}

function addPoint() {
  points++;
  document.getElementById('points').textContent = points;
}
</script>

</body>
</html>

Game Source: Video Arcade

Creator: LunarGalaxy87

Libraries: none

Complexity: complex (261 lines, 7.1 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: video-arcade-lunargalaxy87" to link back to the original. Then publish at arcadelab.ai/publish.