0.はじめに

この記事は、非エンジニアのドシロウトが書いています。プロ向けではありません。
内容的には、ポエムなんですが、一応コード貼るので、ポエムのタグは外しました。

この記事を要約すると

サイドバイサイドでローカルのMP4を２本同時に表示する動画プレーヤーが欲しかった
生成AI　perplexity 先生（無料版）に聞くとほぼできちゃった
自分で直したのはCSSのマージンと一時停止ボタンだけ
すごいのでperplexity 先生（無料版）とのやり取りを記事にする

誰でも知ってるかも？ですが、こんな感じです。

1.作ったもの

codepen に貼ってます。

See the Pen サイドバイサイド動画プレイヤー by sf-os (@sf-os) on CodePen.

サイドバイサイドで動画同時再生して違いを見たくてperplexity 先生（無料版）に作っていただきました。

再生時の画面イメージはこんな感じ

2.どんなやり取りをしたか

これでベストか知らないけどperplexity 先生（無料版）とへの質問は３回でした。

１回目の質問

画面の左右に同じサイズで表示される二つのVideoタグがあり、画面中央下部左側の再生buttonをクリックすると両方のVideoタグのMP4が再生され、画面中央下部右側の停止buttonをクリックすると両方のVideoタグのMP4の再生が停止される、HTML、CSS、JSのスニペットを教えてください。

２回目の質問

画面上部中央にinput type="file"タグを二つ追加してvideo1,video2にをローカルファイルから選択できるように修正してください

３回目の質問

画面下部中央に、ミュートのチェックボックスを追加して、チェックされているときは、再生ボタンを押したときに両方のVideoを無音で再生するように変更してください。

３回の質問の結果、perplexity 先生（無料版）の回答は以下です。

HTML

<div class="video-container">
  <div class="file-inputs">
    <input type="file" id="file-input1" class="file-input" accept="video/mp4">
    <input type="file" id="file-input2" class="file-input" accept="video/mp4">
  </div>
  <div class="video-players">
    <video id="video1" class="video-player" controls>
      <source src="" type="video/mp4">
    </video>
    <video id="video2" class="video-player" controls>
      <source src="" type="video/mp4">
    </video>
  </div>
  <div class="controls">
    <button id="play-button" class="button">再生</button>
    <button id="stop-button" class="button">停止</button>
    <div class="mute-checkbox">
      <input type="checkbox" id="mute-checkbox" class="mute-checkbox__input">
      <label for="mute-checkbox" class="mute-checkbox__label">ミュート</label>
    </div>
  </div>
</div>

CSS

.file-inputs {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.file-input {
  margin: 0 10px;
}

.video-players {
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-player {
  width: 50%;
  height: auto;
  margin: 20px;
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.button {
  margin: 0 10px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.mute-checkbox {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.mute-checkbox__input {
  margin-right: 5px;
}

JS

const fileInput1 = document.getElementById('file-input1');
const fileInput2 = document.getElementById('file-input2');
const video1 = document.getElementById('video1');
const video2 = document.getElementById('video2');
const playButton = document.getElementById('play-button');
const stopButton = document.getElementById('stop-button');
const muteCheckbox = document.getElementById('mute-checkbox');

fileInput1.addEventListener('change', (event) => {
  video1.src = URL.createObjectURL(event.target.files[0]);
});

fileInput2.addEventListener('change', (event) => {
  video2.src = URL.createObjectURL(event.target.files[0]);
});

playButton.addEventListener('click', () => {
  if (muteCheckbox.checked) {
    video1.muted = true;
    video2.muted = true;
  } else {
    video1.muted = false;
    video2.muted = false;
  }
  video1.play();
  video2.play();
});

stopButton.addEventListener('click', () => {
  video1.pause();
  video2.pause();
  video1.currentTime = 0;
  video2.currentTime = 0;
});

ここまで私は１行もコード書いていません。
JSのエラーとかは一切なしでした。すごい。

3.終わりに

perplexity 先生（無料版）すごい。
無料版でここまで出来ちゃうので、有料版はもっとすごいかも。
どう考えても私より能力高いｗｗｗ

以　上