perplexity先生（無料版）がすごすぎて楽な件

## 0.はじめに

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

この記事を要約すると

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

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

## 1.作ったもの

[codepen](https://codepen.io/sf-os/pen/KKYYLLE) に貼ってます。

<p class="codepen" data-height="600" data-default-tab="result" data-slug-hash="KKYYLLE" data-user="sf-os" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sf-os/pen/KKYYLLE">
  サイドバイサイド動画プレイヤー</a> by sf-os (<a href="https://codepen.io/sf-os">@sf-os</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

サイドバイサイドで動画同時再生して違いを見たくて[perplexity](https://www.perplexity.ai/) 先生（無料版）に作っていただきました。

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

![imege](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35574/4ed6c61b-0a08-77d3-9c56-8cda94e030a5.png)

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

これでベストか知らないけど[perplexity](https://www.perplexity.ai/) 先生（無料版）とへの質問は３回でした。

![Clipboard01perplexity.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35574/34512484-434e-d1df-85bd-47651f736d45.jpeg)

:::note info
１回目の質問

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

:::note info
２回目の質問

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

:::note info
３回目の質問

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

３回の質問の結果、[perplexity](https://www.perplexity.ai/) 先生（無料版）の回答は以下です。

```html: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: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;
}
```

```javascript: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](https://www.perplexity.ai/) 先生（無料版）すごい。
無料版でここまで出来ちゃうので、有料版はもっとすごいかも。
どう考えても私より能力高いｗｗｗ

以　上