動画実装のベストプラクティス

<video controls width="640" height="360" poster="thumbnail.jpg" preload="none">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <p>お使いのブラウザは動画タグをサポートしていません。<a href="video.mp4">動画をダウンロード</a>してご覧ください。</p>
</video>

<video controls width="640" height="360">
  <source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08">
  <source src="video.vp9.webm" type="video/webm; codecs=vp9">
  <source src="video.h264.mp4" type="video/mp4">
</video>

<div class="video-container" data-video-src="video.mp4">
  <img src="thumbnail.jpg" alt="動画のサムネイル">
  <button class="play-button" aria-label="動画を再生">▶</button>
</div>

document.addEventListener('DOMContentLoaded', () => {
  const videoContainers = document.querySelectorAll('.video-container');
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const container = entry.target;
        const videoSrc = container.dataset.videoSrc;
        
        container.innerHTML = `
          <video controls width="640" height="360">
            <source src="${videoSrc}" type="video/mp4">
          </video>
        `;
        
        observer.unobserve(container);
      }
    });
  }, { rootMargin: '100px' });
  
  videoContainers.forEach(container => {
    container.querySelector('.play-button').addEventListener('click', () => {
      const videoSrc = container.dataset.videoSrc;
      
      container.innerHTML = `
        <video controls width="640" height="360" autoplay>
          <source src="${videoSrc}" type="video/mp4">
        </video>
      `;
      
      observer.unobserve(container);
    });
    
    observer.observe(container);
  });
});

<video id="video" controls width="640" height="360"></video>

<script src="hls.min.js"></script>
<script>
  const video = document.getElementById('video');
  const videoSrc = 'playlist.m3u8';
  
  if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
  } 
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    // ネイティブHLSをサポートするiOSデバイス向け
    video.src = videoSrc;
  }
</script>

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="captions.ja.vtt" srclang="ja" label="日本語" default>
  <track kind="subtitles" src="captions.en.vtt" srclang="en" label="English">
  <track kind="descriptions" src="descriptions.vtt" srclang="ja" label="音声解説">
</video>

WEBVTT

00:00:01.000 --> 00:00:04.000
こんにちは、今日はウェブ動画のアクセシビリティについて解説します。

00:00:04.500 --> 00:00:09.000
字幕は聴覚障害のある方や、音声をオンにできない環境の方にとって重要です。

<div class="video-player">
  <video id="my-video" width="640" height="360">
    <source src="video.mp4" type="video/mp4">
  </video>
  
  <div class="custom-controls" aria-label="動画コントロール">
    <button id="play-pause" aria-label="再生" aria-pressed="false">▶</button>
    
    <div class="progress-bar">
      <div role="slider" aria-label="シークバー" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" tabindex="0"></div>
    </div>
    
    <button id="mute" aria-label="ミュート">🔊</button>
    
    <div class="volume-control">
      <div role="slider" aria-label="音量" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" tabindex="0"></div>
    </div>
    
    <button id="fullscreen" aria-label="全画面表示">⛶</button>
  </div>
</div>

<section class="hero-section">
  <video autoplay loop muted playsinline aria-hidden="true" disablePictureInPicture>
    <source src="background.webm" type="video/webm">
    <source src="background.mp4" type="video/mp4">
  </video>
  
  <hgroup class="hero-title">
    <h1>コンテンツタイトル</h1>
    <p>重要なコンテンツは動画の上に表示します</p>
  </hgroup>
</section>

.hero-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-section video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content {
  position: relative;
  z-index: 1;
  color: white;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  /* その他のスタイリング */
}

<div class="video-wrapper">
  <video controls>
    <source src="video.mp4" type="video/mp4">
  </video>
</div>

.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.video-wrapper video {
  width: 100%;
  height: 100%;
}

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/VIDEO_ID" title="YouTubeビデオ" frameborder="0" allowfullscreen></iframe>

<iframe width="640" height="360" src="https://player.vimeo.com/video/VIDEO_ID?dnt=1" title="Vimeoビデオ" frameborder="0" allowfullscreen></iframe>