Basic operations of multimedia APIs (play, pause, volume control, etc.)

Multimedia plays a crucial role in modern web pages, and HTML5 provides a series of APIs to control audio and video, including playback, pause, volume adjustment, and other functionalities. These APIs allow developers to directly manipulate <audio> and <video> elements via JavaScript, offering flexible interaction methods.

Playback and Pause Control

The play() and pause() methods can control the playback state of media. Here’s a basic example:

<video id="myVideo" src="example.mp4" controls></video>
<button id="playBtn">Play</button>
<button id="pauseBtn">Pause</button>

<script>
  const video = document.getElementById('myVideo');
  document.getElementById('playBtn').addEventListener('click', () => {
    video.play();
  });
  document.getElementById('pauseBtn').addEventListener('click', () => {
    video.pause();
  });
</script>

In real-world scenarios, more complex logic might be needed, such as toggling playback state:

const togglePlay = () => {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
};

Volume Control

The volume property ranges from 0.0 (muted) to 1.0 (maximum volume) and can be adjusted in real-time using a slider:

<input type="range" id="volumeControl" min="0" max="1" step="0.1" value="1">
<script>
  document.getElementById('volumeControl').addEventListener('input', (e) => {
    video.volume = e.target.value;
  });
</script>

Mute functionality is achieved via the muted property:

document.getElementById('muteBtn').addEventListener('click', () => {
  video.muted = !video.muted;
});

Progress Control

The currentTime property can get or set the current playback position (in seconds). Combined with the duration property, it enables a progress bar:

<input type="range" id="progressBar" min="0" max="100" value="0">
<script>
  video.addEventListener('timeupdate', () => {
    const percent = (video.currentTime / video.duration) * 100;
    document.getElementById('progressBar').value = percent;
  });
  
  document.getElementById('progressBar').addEventListener('input', (e) => {
    const seekTime = (e.target.value / 100) * video.duration;
    video.currentTime = seekTime;
  });
</script>

Playback Rate Control

The playbackRate property adjusts playback speed (1.0 is normal speed):

document.getElementById('speedBtn').addEventListener('click', () => {
  video.playbackRate = video.playbackRate === 1.0 ? 2.0 : 1.0;
});

Fullscreen Control

Fullscreen mode can be enabled using the Fullscreen API:

document.getElementById('fullscreenBtn').addEventListener('click', () => {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen();
  }
});

Event Listening

Key event handling examples:

video.addEventListener('ended', () => {
  console.log('Playback ended');
});

video.addEventListener('canplay', () => {
  console.log('Media can start playing');
});

video.addEventListener('error', () => {
  console.error('Loading error');
});

Multi-Source Compatibility

For cross-browser compatibility, use the <source> tag:

<video controls>
  <source src="example.mp4" type="video/mp4">
  <source src="example.webm" type="video/webm">
  Your browser does not support HTML5 video.
</video>

Custom Control Interface

Hide native controls and implement a custom UI:

video::-webkit-media-controls {
  display: none !important;
}

Then implement all control functionalities via JavaScript, including:

• Custom progress bar
• Volume panel
• Play/pause button state synchronization
• Fullscreen toggle icon

Mobile-Specific Handling

Additional considerations for touch devices:

video.addEventListener('touchstart', () => {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
});

Advanced Feature Implementation

Picture-in-Picture mode (requires browser support):

document.getElementById('pipBtn').addEventListener('click', async () => {
  try {
    if (video !== document.pictureInPictureElement) {
      await video.requestPictureInPicture();
    } else {
      await document.exitPictureInPicture();
    }
  } catch (error) {
    console.error('Picture-in-Picture error:', error);
  }
});

Performance Optimization Tips

Preload strategy settings:

<video preload="auto" ...>

Or dynamically adjust based on network conditions:

if (navigator.connection.effectiveType === '4g') {
  video.preload = 'auto';
} else {
  video.preload = 'metadata';
}

Cross-Browser Compatibility Solutions

Universal method to detect API support:

function supportsVideoType(type) {
  const video = document.createElement('video');
  return video.canPlayType(`video/${type}`) !== '';
}

Media State Synchronization

Synchronize playback state across multiple devices:

// Primary device
video.addEventListener('timeupdate', () => {
  broadcastCurrentTime(video.currentTime);
});

// Secondary device
function syncPlayback(time) {
  video.currentTime = time;
  if (!video.paused) video.play();
}

Error Handling Mechanism

Comprehensive error handling example:

video.addEventListener('error', () => {
  switch(video.error.code) {
    case MediaError.MEDIA_ERR_ABORTED:
      console.error('Playback aborted');
      break;
    case MediaError.MEDIA_ERR_NETWORK:
      console.error('Network error');
      break;
    case MediaError.MEDIA_ERR_DECODE:
      console.error('Decoding error');
      break;
    case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
      console.error('Format not supported');
      break;
    default:
      console.error('Unknown error');
  }
});

Real-Time Filter Processing

Apply video filters via Canvas:

const canvas = document.getElementById('filterCanvas');
const ctx = canvas.getContext('2d');

function applyFilter() {
  ctx.drawImage(video, 0, 0);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  // Process pixel data
  ctx.putImageData(imageData, 0, 0);
  requestAnimationFrame(applyFilter);
}

video.addEventListener('play', () => {
  applyFilter();
});

Media Segment Playback

Play a specific segment of media:

function playSegment(start, end) {
  video.currentTime = start;
  video.play();
  
  const checkTime = () => {
    if (video.currentTime >= end) {
      video.pause();
      video.removeEventListener('timeupdate', checkTime);
    }
  };
  
  video.addEventListener('timeupdate', checkTime);
}

Audio Visualization

Spectrum analysis using the Web Audio API:

const audioCtx = new AudioContext();
const source = audioCtx.createMediaElementSource(video);
const analyser = audioCtx.createAnalyser();
source.connect(analyser);
analyser.connect(audioCtx.destination);

function visualize() {
  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);
  analyser.getByteFrequencyData(dataArray);
  // Use dataArray to draw visualization effects
  requestAnimationFrame(visualize);
}

video.addEventListener('play', () => {
  audioCtx.resume().then(() => {
    visualize();
  });
});