videoタグでHTMLに埋め込んだ動画に2秒後にスタート＆それをサムネ画像に指定し、0秒後にスタート＆それをサムネ画像に指定するjavascript

すごい特殊な状況の動画システムを実装したのでシェア。
需要ある？ねぇだろーけど、たぶん世界の三人くらいは同じことで困っていると思う。

９個の動画があります。
・８個目の動画のみ２秒後から再生スタート＆その時点のサムネ画像表示
・その他の動画は０秒後から再生スタート＆その時点のサムネ画像表示

このシステムを実装したので、コピペしてカスタマイズして使ってくださいな。
これは０秒後から再生スタート＆その時点のサムネ画像表示のHTML

<div class="video-container-tate">
  <video id="myVideo1" class="video" poster="" controls="controls">
    <source src="https://●●●.mp4" type="video/mp4" />
    お使いのブラウザでは動画は表示できません。
  </video>
</div>

<div class="video-container-tate">
  <video id="myVideo2" class="video" poster="" controls="controls">
    <source src="https://●●●.mp4" type="video/mp4" />
    お使いのブラウザでは動画は表示できません。
  </video>
</div>

<div class="video-container-tate">
  <video id="myVideo3" class="video" poster="" controls="controls">
    <source src="https://●●●.mp4" type="video/mp4" />
    お使いのブラウザでは動画は表示できません。
  </video>
</div>

・・・略

poster="" この中には好きなサムネ画像を挿入します。ない場合は、0秒または2秒後時点の表示をサムネ画像として表示します。

●●●　には動画のURLを挿入してください。youtubeでもvimeoでもあなたのレンタルサーバーにアップした独自動画でもOKです。

id=myVideo は同じidを付けたらダメなので、全部違う名前に必ずすること

ほんで、こっちが特例の８個目の動画のみ２秒後から再生スタート＆その時点のサムネ画像表示のHTML

<div class="video-container-tate">
  <video id="myVideo8_2seconds" class="video" poster="" controls="controls">
    <source src="https://●●●.mp4" type="video/mp4" />
    お使いのブラウザでは動画は表示できません。
  </video>
</div>

これはjavascriptの方ね。
HTML内の</head>直前に記述しておけ。
または●●.jsのファイル作って外部jsとしてHTMLにリンクするかね。
その場合は<script></script>は削除してね。
これはHTML内に記述する時に必須だからさ。
外部jsにする場合はカットね。
じゃないと機能しないのよ。

<script>
document.addEventListener("DOMContentLoaded", function() {
  const videos = document.querySelectorAll('.video');
  const specialVideo = document.getElementById('myVideo8_2seconds'); // 特定の動画
  
  videos.forEach(function(video) {
    let targetTime = 0; // デフォルトが0秒

    if (video === myVideo8_2seconds) {
      targetTime = 2; // 特定の動画は2秒に設定
    }
  
    video.addEventListener('loadeddata', function() {
      video.currentTime = targetTime;
    }, false);

    video.addEventListener('seeked', function() {
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth; 
      canvas.height = video.videoHeight;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

      const imgDataUrl = canvas.toDataURL();
      video.setAttribute('poster', imgDataUrl);
    }, false);

    video.load();
  });
});

</script>

上記のHTMLにclassで.video付けることで、その全部に0秒サムネ画像と0秒スタートが適用されると。

まぁ、論より証拠で、コピペしてDreamweaverかなんかで動かしてみてくださいな。

本当は完成形を見せたいんだけど、実はア●ルトサイトに実装したから、見せられないというオチですｗ

あ、CSSは俺が作ったのは複雑で面倒なのでシェアやめとく。
頑張ってねｗ
スマホ版とPC版で分けたレスポンシブだからCSS情報量が多いんだよね。

なお、これはChatGPT4に考えてもらった。

魔法の呪文：プロンプト

★ここにHTMLコピペ★
このHTMLに関して、特定の１つの動画だけ開始2秒にして、その時点の表示をサムネ画像として表示させたい。
その他の動画は開始0秒にして、その時点の表示をサムネ画像として表示させたい。
その場合のコードは？

これで俺よりももっと詳しく教えてくれるよ。
AI,やばすぎ、すごすぎ。

そういや、ありがとう！さすが！って一回褒めたんだ。
それが最後の一日の回数の制限に達してしまって、その日はGPT４つかえなくなっちゃった。
褒めなけりゃ１回分、使えたのにな。
褒めなけりゃよかった・・・
と、人としてヤバくなるところでしたｗ

じゃあの。