0.はじめに
この記事は、非エンジニアのドシロウトが書いています。プロ向けではありません。
内容的には、ポエムなんですが、一応コード貼るので、ポエムのタグは外しました。
この記事を要約すると
- サイドバイサイドでローカルのMP4を2本同時に表示する動画プレーヤーが欲しかった
- 生成AI perplexity 先生(無料版)に聞くとほぼできちゃった
- 自分で直したのはCSSのマージンと一時停止ボタンだけ
- すごいのでperplexity 先生(無料版)とのやり取りを記事にする
誰でも知ってるかも?ですが、こんな感じです。
1.作ったもの
codepen に貼ってます。
See the Pen サイドバイサイド動画プレイヤー by sf-os (@sf-os) on CodePen.
サイドバイサイドで動画同時再生して違いを見たくてperplexity 先生(無料版)に作っていただきました。
再生時の画面イメージはこんな感じ
2.どんなやり取りをしたか
これでベストか知らないけどperplexity 先生(無料版)とへの質問は3回でした。
1回目の質問
画面の左右に同じサイズで表示される二つのVideoタグがあり、画面中央下部左側の再生buttonをクリックすると両方のVideoタグのMP4が再生され、画面中央下部右側の停止buttonをクリックすると両方のVideoタグのMP4の再生が停止される、HTML、CSS、JSのスニペットを教えてください。
2回目の質問
画面上部中央にinput type="file"タグを二つ追加してvideo1,video2にをローカルファイルから選択できるように修正してください
3回目の質問
画面下部中央に、ミュートのチェックボックスを追加して、チェックされているときは、再生ボタンを押したときに両方のVideoを無音で再生するように変更してください。
3回の質問の結果、perplexity 先生(無料版)の回答は以下です。
<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>
.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;
}
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;
});
ここまで私は1行もコード書いていません。
JSのエラーとかは一切なしでした。すごい。
3.終わりに
perplexity 先生(無料版)すごい。
無料版でここまで出来ちゃうので、有料版はもっとすごいかも。
どう考えても私より能力高いwww
以 上