HTML5背景视频鼠标控制播放方向及移动端倾斜控制实现问询

Hey there! Great question—this kind of interactive video is super engaging. Let's break this down into two parts: desktop mouse-driven playback and mobile tilt-based control.

Desktop: Mouse Movement Control #

The core idea here is to track the mouse's horizontal position relative to your video container, then map that position to the video's playback time. Since your video is 2 seconds long, we'll use the midpoint (1 second) as our "neutral" position.

Example Code #

HTML

<div class="video-container">
  <video id="interactive-video" loop muted playsinline>
    <source src="your-video-file.mp4" type="video/mp4">
  </video>
</div>

CSS

.video-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

#interactive-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

const video = document.getElementById('interactive-video');
const container = document.querySelector('.video-container');
const videoDuration = 2; // Your video's total length in seconds

container.addEventListener('mousemove', (e) => {
  // Calculate mouse position relative to viewport (0 to 1)
  const xPos = e.clientX / window.innerWidth;
  // Map position to video time: 0s (left edge) → 1s (center) → 2s (right edge)
  const targetTime = xPos * videoDuration;
  
  // Smoothly adjust playback time to avoid jumpiness
  video.currentTime += (targetTime - video.currentTime) * 0.1;
});

// Optional: Pause video when mouse leaves the container
container.addEventListener('mouseleave', () => {
  video.pause();
});

This code will make the video play forward as you move your mouse right (toward the 2-second mark) and rewind as you move left (toward 0 seconds). The 0.1 smoothness factor keeps playback feeling natural instead of jerky.

Mobile: Device Tilt Control #

Absolutely! You can implement this on Android and iPhone using the DeviceOrientationEvent API. We'll use the gamma value (which measures left/right device tilt) to control playback direction.

Important Note
Modern browsers require user interaction (like a tap) to grant permission for device orientation access, so we'll add a tap-to-start prompt to handle this.

Example Code #

Updated HTML

<div class="video-container">
  <div id="tap-prompt">Tap to enable tilt control</div>
  <video id="interactive-video" loop muted playsinline>
    <source src="your-video-file.mp4" type="video/mp4">
  </video>
</div>

Updated CSS

#tap-prompt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.5rem;
  z-index: 10;
  cursor: pointer;
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
}

JavaScript

const video = document.getElementById('interactive-video');
const container = document.querySelector('.video-container');
const tapPrompt = document.getElementById('tap-prompt');
const videoDuration = 2;
let isTiltEnabled = false;

// Request permission and enable tilt control on user tap
tapPrompt.addEventListener('click', async () => {
  try {
    // Handle iOS 13+ permission request
    if (typeof DeviceOrientationEvent.requestPermission === 'function') {
      await DeviceOrientationEvent.requestPermission();
    }
    isTiltEnabled = true;
    tapPrompt.style.display = 'none';
    video.play();
  } catch (err) {
    console.error('Permission denied for device orientation:', err);
    tapPrompt.textContent = 'Permission denied—tap to try again';
  }
});

// Listen for device tilt events
window.addEventListener('deviceorientation', (e) => {
  if (!isTiltEnabled) return;
  
  // Gamma ranges from -90 (full left tilt) to 90 (full right tilt)
  // Normalize value to a 0-1 range
  const normalizedGamma = (e.gamma + 90) / 180;
  // Map normalized value to video time (0s to 2s)
  const targetTime = normalizedGamma * videoDuration;
  
  // Smoothly update playback time
  video.currentTime += (targetTime - video.currentTime) * 0.1;
});

This setup lets users tilt their phone left to rewind the video and right to play forward. The normalization step converts raw tilt values into a range that aligns perfectly with your 2-second video length.

内容的提问来源于stack exchange，提问作者Dorian Kinsey