ビデオプレーヤー Video Player

.demo-vplayer { border-radius: 12px; overflow: hidden; background: #0f0f1a; }
.demo-vplayer-screen {
  position: relative; aspect-ratio: 16/9; background: linear-gradient(135deg, #1a1a2e, #16213e);
  display: flex; align-items: center; justify-content: center;
}
.demo-vplayer-poster { display: flex; align-items: center; justify-content: center; }
.demo-vplayer-big-play {
  width: 72px; height: 72px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.5); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); transition: all 0.2s;
}
.demo-vplayer-big-play:hover { background: var(--ui-primary); transform: scale(1.08); }
.demo-vplayer-big-play svg { margin-left: 4px; }
.demo-vplayer-time-display {
  position: absolute; bottom: 12px; left: 12px;
  color: rgba(255,255,255,0.7); font-size: 12px;
  font-variant-numeric: tabular-nums; display: none;
}
.demo-vplayer-controls {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: #1a1a2e;
}
.demo-vplayer-play {
  border: none; background: none; color: #fff; cursor: pointer;
  padding: 4px; display: flex; align-items: center; transition: color 0.2s;
}
.demo-vplayer-play:hover { color: var(--ui-primary); }
.demo-vplayer-current, .demo-vplayer-duration {
  font-size: 12px; color: #888; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.demo-vplayer-seekbar {
  flex: 1; height: 4px; background: #333; border-radius: 2px;
  cursor: pointer; position: relative;
}
.demo-vplayer-seekbar:hover { height: 6px; }
.demo-vplayer-seekbar-fill {
  height: 100%; width: 0%; background: var(--ui-primary);
  border-radius: 2px; transition: width 0.1s;
}
.demo-vplayer-seekbar-thumb {
  position: absolute; top: 50%; right: auto;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ui-primary); transform: translate(-50%, -50%);
  left: 0%; opacity: 0; transition: opacity 0.2s;
}
.demo-vplayer-seekbar:hover .demo-vplayer-seekbar-thumb { opacity: 1; }
.demo-vplayer-volume-wrap { display: flex; align-items: center; gap: 4px; }
.demo-vplayer-mute {
  border: none; background: none; color: #999; cursor: pointer;
  display: flex; padding: 4px; transition: color 0.2s;
}
.demo-vplayer-mute:hover { color: #fff; }
.demo-vplayer-volume-bar {
  width: 60px; height: 4px; background: #333; border-radius: 2px;
  cursor: pointer; overflow: hidden;
}
.demo-vplayer-volume-fill {
  height: 100%; width: 80%; background: var(--ui-primary);
  border-radius: 2px;
}
.demo-vplayer-fullscreen {
  border: none; background: none; color: #999; cursor: pointer;
  display: flex; padding: 4px; transition: color 0.2s;
}
.demo-vplayer-fullscreen:hover { color: #fff; }

(function(){
  var playing = false;
  var progress = 0;
  var interval = null;
  var totalSec = 225;
  var playBtn = document.querySelector('.demo-vplayer-play');
  var playIcon = playBtn.querySelector('.demo-vplayer-play-icon');
  var pauseIcon = playBtn.querySelector('.demo-vplayer-pause-icon');
  var bigPlay = document.querySelector('.demo-vplayer-big-play');
  var seekFill = document.querySelector('.demo-vplayer-seekbar-fill');
  var seekThumb = document.querySelector('.demo-vplayer-seekbar-thumb');
  var currentEl = document.querySelector('.demo-vplayer-current');
  var seekbar = document.querySelector('.demo-vplayer-seekbar');
  function fmt(s){ var m=Math.floor(s/60); var sec=Math.floor(s%60); return m+':'+String(sec).padStart(2,'0'); }
  function updateUI(){
    var pct = (progress / totalSec) * 100;
    seekFill.style.width = pct + '%';
    seekThumb.style.left = pct + '%';
    currentEl.textContent = fmt(progress);
  }
  function play(){
    playing = true;
    playIcon.style.display = 'none';
    pauseIcon.style.display = 'block';
    bigPlay.parentElement.style.display = 'none';
    interval = setInterval(function(){
      progress += 1;
      if(progress >= totalSec){ progress = 0; pause(); }
      updateUI();
    }, 1000);
  }
  function pause(){
    playing = false;
    playIcon.style.display = 'block';
    pauseIcon.style.display = 'none';
    clearInterval(interval);
  }
  function toggle(){ if(playing) pause(); else play(); }
  playBtn.addEventListener('click', toggle);
  bigPlay.addEventListener('click', play);
  seekbar.addEventListener('click', function(e){
    var rect = this.getBoundingClientRect();
    var pct = (e.clientX - rect.left) / rect.width;
    progress = Math.round(pct * totalSec);
    updateUI();
  });
  var volumeBar = document.querySelector('.demo-vplayer-volume-bar');
  var volumeFill = document.querySelector('.demo-vplayer-volume-fill');
  var muteBtn = document.querySelector('.demo-vplayer-mute');
  var muted = false;
  muteBtn.addEventListener('click', function(){
    muted = !muted;
    volumeFill.style.width = muted ? '0%' : '80%';
    this.style.color = muted ? '#555' : '#999';
  });
  volumeBar.addEventListener('click', function(e){
    var rect = this.getBoundingClientRect();
    var pct = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
    volumeFill.style.width = pct + '%';
    muted = pct === 0;
  });
})();