Web Design Leaves

<div class="video-wrapper">
  <!-- preload="none" を指定し、autoplay は指定しない -->
  <video muted loop playsinline preload="none" poster="images/sample.jpg">
    <source src="videos/sample.webm" type="video/webm">
    <source src="videos/sample.mp4" type="video/mp4">
    <p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
  </video>
  <div class="video-content">
    <h2>Video Background</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit..</p>
  </div>
</div>

.video-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 1600px;
  height: 500px;  /* 高さ固定 */
  margin: auto;
}

.video-wrapper::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.5);
}

.video-wrapper video {
  width: 100%;  /* 明示的に幅を設定（必須） */
  height: 100%; /* 明示的に高さを設定（必須） */
  object-fit: cover;  /* ラッパーにに収まるように拡大縮小 */
  object-position: 50% 0%;  /* 動画の位置の調整 */
}

.video-content {
  margin: 0;
  position: absolute;
  top: 43%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
}

.video-content h2 {
  font-size: 2rem;
  letter-spacing: 0.1rem;
  text-shadow: 2px 2px 2px #444;
}

.video-content p {
  max-width: 600px;
  padding: 0 2rem;
}

/* ビューポート幅が 480px 以下の場合はビデオを非表示にして背景画像を表示 */
@media screen and (max-width: 480px) {
  .video-wrapper {
    height: 340px;  /* 高さの調整 */
    background: url(images/cover.jpg);  /* 別途背景画像を用意 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .video-wrapper video {
    display: none;  /* ビデオを非表示（背景画像を表示するため） */
  }
}

document.addEventListener('DOMContentLoaded', ()=> {
  // .video-wrapper 内の video 要素を全て取得
  const videos = document.querySelectorAll('.video-wrapper video');

  // それぞれのビデオ要素について以下を実行
  videos.forEach((video) => {
    // ビューポート幅が 480px より大きい場合はビデオを再生
    if (!window.matchMedia('(max-width: 480px)').matches) {
      // preload プロパティに auto を設定
      video.preload = 'auto';
      // autplay プロパティを true に設定して自動再生
      video.autoplay = true;
    }
  });
}, false);

.video-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 340px;
  background: url(images/cover.jpg); /* 別途背景画像を用意 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.video-wrapper::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.5);
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  display: none;  /* ビデオを非表示（背景画像を表示するため） */
}

.video-content {
  margin: 0;
  position: absolute;
  top: 43%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
}

.video-content h2 {
  font-size: 2rem;
  letter-spacing: 0.1rem;
  text-shadow: 2px 2px 2px #444;
}

.video-content p {
  max-width: 600px;
  padding: 0 2rem;
}

/* 480px 以上の場合はビデオを表示 */
@media screen and (min-width: 480px) {
  .video-wrapper {
    height: 500px;
    max-width: 1600px;
    margin: auto;
    background: none;
  }
  .video-wrapper video {
    display: block;  /* ビデオを表示 */
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const videos = document.querySelectorAll('.video-wrapper video');
  videos.forEach((video) => {
    // ビューポート幅が 480px 以上の場合はビデオを再生
    if (window.matchMedia('(min-width: 480px)').matches) {
      video.preload = 'auto';
      video.autoplay = true;
    }
  });
}, false);

<div class="video-wrapper">
  <video muted loop playsinline preload="none" poster="images/sample.jpg">
    <source src="videos/sample.webm" type="video/webm">
    <source src="videos/sample.mp4" type="video/mp4">
    <p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
  </video>
  <div class="video-content">
    <h2>Video Background</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
  </div>
</div>

document.addEventListener('DOMContentLoaded', () => {
  // .video-wrappe を取得
  const videoWrappers = document.querySelectorAll('.video-wrapper');
  // メディアクエリを設定して MediaQueryList オブジェクトを作成
  const mql = window.matchMedia('(min-width: 480px)');
  // 取得した各 .video-wrappe で
  videoWrappers.forEach((wrapper) => {
    // video 要素を取得
    const video = wrapper.querySelector('video');

    // video 要素に canplay イベントのリスナを設定
    video.addEventListener('canplay', () => {
      // 動画が再生できる状態になったら video_ready クラスを追加
      wrapper.classList.add('video_ready');
    }, false);

    //ビューポート幅が480px以上の場合は動画を再生
    if (mql.matches) {
      video.preload = 'auto';
      video.autoplay = true;
    } else {
      //ビューポート幅が480px未満ではvideo_readyクラスを追加（ローディング画像を表示しない）
      video.parentElement.classList.add('video_ready');
    }
  });
}, false);

.video-wrapper {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  width: 100%;
  background: url(images/sample.jpg);  /* poster 属性に設定する画像を指定 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.video-wrapper::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(255, 255, 255, 0.7);
  transition: background-color 1s;  /*オーバーレイにトランジションを設定 */
}

/* JavaScript で .video_ready が付与された際のオーバーレイ */
.video-wrapper.video_ready::before {
  background-color: rgba(0, 0, 0, 0.3);
}

/* JavaScript で .video_ready が付与されるまではローディング画像を表示 */
.video-wrapper:not(.video_ready)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 80px;
  height: 80px;
  background-image: url(images/spinner.png);  /* ローディング画像 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ビューポート幅が480px未満の場合はビデオを非表示 */
.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none; /* ビデオを非表示 */
}

/* ビューポート幅が480px以上の場合 */
@media screen and (min-width: 480px) {
  /* .video_ready が付与されたら背景画像を非表示 */
  .video-wrapper.video_ready {
    background: none;
  }

  /* .video_ready が付与されたらビデオを表示 */
  .video-wrapper.video_ready video {
    display: block; /* ビデオを表示 */
  }

  /* .video_ready が付与された場合はトランジションの長さを変更 */
  .video-wrapper.video_ready::before {
    transition: background-color 8s;
  }
}

.video-content {
  margin: 0;
  position: absolute;
  top: 43%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
}

.video-content h2 {
  font-size: 2rem;
  letter-spacing: 0.1rem;
  text-shadow: 2px 2px 2px #111;
}

.video-content p {
  max-width: 600px;
  padding: 0 2rem;
}

.video-wrapper {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: url(images/sample.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

<div class="video-wrapper">
  <video muted loop playsinline preload="none" poster="images/sample.jpg">
    <source src="videos/sample.webm" type="video/webm">
    <source src="videos/sample.mp4" type="video/mp4">
    <p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
  </video>
  <div class="spinner"> <!-- ローディングアイコンの HTML -->
    <div class="bounce1"></div>
    <div class="bounce2"></div>
    <div class="bounce3"></div>
  </div>
  <div class="video-content">
    <h2>Video Background</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
  </div>
</div>

video {
  aspect-ratio: 16/9;
  width: 70%;
  height: auto;
  max-width: 500px;
}

<video src="sample.mp4" controls>
  <p>お使いのブラウザーは HTML5 動画をサポートしていません。</p>
</video>

<video src="sample.mp4" width="320" height="180"></video>

<video class="foo" src="sample.mp4" width="1280" height="720"></video>

.foo {
  width: 70%;
  height: auto;  /* auto を指定 */
}

<div class="video-wrapper">
  <video src="sample.mp4" width="1280" height="720"></video>
</div>

.video-wrapper {
  width: 70%;  /* % で指定して可変に */
  max-width: 500px;  /* 必要に応じて最大幅を指定 */
}

.video-wrapper video {
  width: 100%;  /* 親要素の幅いっぱいに */
  height: auto;  /* height には auto を指定 */
}

document.addEventListener('DOMContentLoaded', () => {
    const video = document.querySelector('.js-video');
    video.src = "sample.mp4";
    video.muted = true;
    video.controls = true;
    video.poster="poster.jpg"
    video.width = "640";
    video.height = "360";
    video.setAttribute('playsinline','');
    // ダウンロードメニューを表示させない
    video.setAttribute('controlslist', 'nodownload');
    // フルスクリーン表示させない（Safari では無視される）
    video.setAttribute('controlslist', 'nofullscreen');
    // 上記は video.controlsList = 'nodownload nofullscreen'; でも同じ
    // コンテクストメニューを表示しない
    video.addEventListener('contextmenu', e => {
      e.preventDefault();
    });
    video.autoplay = true;  //自動再生 または video.play();
  });

<div class="hover-video-wrapper">
  <video src="sample.mp4" poster="poster.jpg"></video>
</div>

document.addEventListener('DOMContentLoaded', () => {

  const hoverVideoWrappers = document.querySelectorAll('.hover-video-wrapper');

  hoverVideoWrappers.forEach((wrapper) => {
    // video 要素
    const video = wrapper.querySelector('video');
    // プロパティを設定
    video.muted = true;
    video.setAttribute('playsinline', '');
    video.preload = 'auto';

    // .hover-video-wrapper の mouseenter イベント
    wrapper.addEventListener('mouseenter', ()=> {
      video.play(); // 再生
    }, false);

    // .hover-video-wrapper の mouseleave イベント
    wrapper.addEventListener('mouseleave', ()=> {
      video.pause(); // 一時停
    }, false);
  });
});

.hover-video-wrapper {
  aspect-ratio: 1618/1000;
  width: 100%;
  max-width: 600px;
  position: relative;
  overflow: hidden;
}

/* オーバーレイ */
.hover-video-wrapper::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.4);
  transition: background-color 1s; /* トランジション */
}

/* ホバー時のオーバーレイ */
.hover-video-wrapper:hover::before {
  background-color: rgba(0, 0, 0, 0);
}

.hover-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="js-video-wrapper">
  <video src="sample.mp4" poster="poster.jpg"></video>
  <button class="play" type="button">Play</button>
  <button class="back" type="button">Back</button>
</div>

document.addEventListener('DOMContentLoaded', () => {

  const videoWrappers = document.querySelectorAll('.js-video-wrapper');

  videoWrappers.forEach((wrapper) => {
    // video 要素
    const video = wrapper.querySelector('video');
    video.muted = true;
    video.setAttribute('playsinline', '');
    video.preload= 'auto';

    // Play ボタン
    const play = wrapper.querySelector('button.play');
    // Back ボタン
    const back = wrapper.querySelector('button.back');

    // Play ボタンに click イベントのリスナーを登録
    play.addEventListener('click', handlePlayBtn, false);
    // Back ボタンに click イベントのリスナーを登録
    back.addEventListener('click', handleBackBtn, false);
    // video 要素に ended イベントのリスナーを登録
    video.addEventListener('ended', videoEnded, false);

    // ビデオを再生する非同期関数
    async function playVideo() {
      try {
        // await を指定して Promise が確定するまで待つ
        await video.play();
        // Promise が解決されたらボタンに playing クラスを追加してテキストを変更
        play.classList.add('playing');
        play.textContent = 'Pause';
      } catch (err) {
        // 再生が開始されない場合（Promise が拒否された場合）はクラスを削除
        play.classList.remove('playing');
      }
    }

    // Play ボタンのクリックイベントのリスナー
    function handlePlayBtn() {
      // ビデオが一時停止状態の場合（読み取り専用の paused プロパティで判定）
      if (video.paused) {
        // playVideo()を呼び出す
        playVideo();
      } else {
        // 一時停止状態でなければ、一時停止しクラスを削除しテキストを変更
        video.pause();
        play.textContent = 'Play';
        play.classList.remove('playing');
      }
    }

    // Back ボタンのクリックイベントのリスナー
    function handleBackBtn() {
      // ビデオが一時停止状態の場合
      if (video.paused) {
        // 先頭に戻す
        video.currentTime = 0;
      } else {
        // 一時停止状態でなければ、一時停止して先頭に戻し、クラスを削除しテキストを変更
        video.pause();
        video.currentTime = 0;
        play.textContent = 'Play';
        play.classList.remove('playing');
      }
    }

    // ビデオが終了した際に発生する ended イベントのリスナー
    function videoEnded() {
      // ビデオが終了したら、ボタンのラベルを変更し playing クラスを削除
      play.textContent = 'Play';
      play.classList.remove('playing');
    }
  });
});

// video 要素を取得
const video = document.querySelector('video');

// addEventListener で canplaythrough イベントにリスナーを設定
video.addEventListener('canplaythrough', (event) => {
  console.log(event.type + '：動画全体を再生できるはずです');
});

// oncanplaythrough で canplaythrough イベントにリスナーを設定
video.oncanplaythrough= (event) => {
  console.log(event.type + '：動画全体を再生できるはずです');
};

<video id="eventTarget" src="sample.mp4" controls muted autoplay playsinline poster="poster.jpg"></video>
<button type="button" id="clear-events">Clear Events</button>
<ol id="events"></ol>

const video = document.getElementById('eventTarget');
const ol =  document.getElementById('events');

// 各イベントにリスナー（listEvents）を登録
video.addEventListener('loadstart', listEvents);
video.addEventListener('loadeddata', listEvents);
video.addEventListener('loadedmetadata', listEvents);
video.addEventListener('canplay', listEvents);
video.addEventListener('canplaythrough', listEvents);
video.addEventListener('play', listEvents);
video.addEventListener('pause', listEvents);
video.addEventListener('ratechange', listEvents);
video.addEventListener('seeked', listEvents);
video.addEventListener('ended', listEvents);

// リスナーの定義
function listEvents(e) {
  // li 要素を生成
  const li = document.createElement('li');
  // 生成した li 要素のテキストにイベント名（e.type）を設定
  li.textContent = e.type;
  ol.appendChild(li);
}

document.getElementById('clear-events').addEventListener('click', ()=> {
  ol.innerHTML = '';
});

<div class="js-video-wrapper">
  <video src="sample.mp4" controls poster="poster.jpg"></video>
</div>

document.addEventListener('DOMContentLoaded', () => {
  // .video-wrappe を取得
  const jsVideoWrappers = document.querySelectorAll('.js-video-wrapper');
  // 取得した各 .video-wrappe で
  jsVideoWrappers.forEach((wrapper) => {
    // video 要素を取得
    const video = wrapper.querySelector('video');
    video.muted = true;
    video.setAttribute('playsinline', '');
    video.preload = 'auto';

    // video 要素に canplaythrough イベントのリスナを設定
    video.addEventListener('canplaythrough', () => {
      // ポジションを移動するアニメーション
      const slideUp = video.animate(
        {
          objectPosition: ['50% 100%', '50% 0%']
        },
        {
          duration: 1500,
          easing: 'ease-out',
        }
      );
      // アニメーションが終了したら動画を再生
      slideUp.onfinish = () => {
        video.play();
      }
    }, false);
  });
}, false);

.js-video-wrapper {
  aspect-ratio: 2/1;
  width: 100%;
}

.js-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}

document.addEventListener('DOMContentLoaded', () => {
  const jsVideoWrappers = document.querySelectorAll('.js-video-wrapper');
  jsVideoWrappers.forEach((wrapper) => {
    const video = wrapper.querySelector('video');
    video.muted = true;
    video.setAttribute('playsinline', '');
    video.preload = 'auto';

    video.addEventListener('canplaythrough', () => {
      const slideUp = video.animate(
        {
          objectPosition: ['50% 100%', '50% 0%']
        },
        {
          duration: 1500,
          easing: 'ease-out',
        }
      );
      slideUp.onfinish = () => {
        video.play();
      }
    }, false);  //ループさせない場合は第3引数に {once: true} を指定

    // timeupdate を監視
    video.addEventListener('timeupdate', () => {
      // currentTime が5以上になったら
      if (video.currentTime >= 5) {
        // 一時停止
        video.pause();
        // currentTime に0を設定（ループする）
        video.currentTime = 0;
      }
    }, false);
  });
}, false);