以下は、HTML5のvideo要素を利用して、ユーザーが読み込んだ動画ファイルを自動的にリサイズするJavaScriptのサンプルコードです。このコードは、安全性に配慮してevalを使用していません。
```
<!DOCTYPE html>
<html>
<head>
<title>YouTube ショート動画サイズ変換</title>
</head>
<body>
<label for="video-upload">動画を選択してください：</label>
<input type="file" id="video-upload" accept="video/*">
<video id="video-player" controls></video>
<button onclick="resizeVideo()">リサイズ</button>
<script>
function resizeVideo() {
var videoUpload = document.getElementById('video-upload');
var videoPlayer = document.getElementById('video-player');
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var uploadWidth = videoPlayer.videoWidth;
var uploadHeight = videoPlayer.videoHeight;
var aspectRatio = uploadWidth / uploadHeight;
var desiredWidth = 1920;
var desiredHeight = 1080;
if (uploadWidth > uploadHeight) {
desiredHeight = Math.round(desiredWidth / aspectRatio);
} else {
desiredWidth = Math.round(desiredHeight * aspectRatio);
}
canvas.width = desiredWidth;
canvas.height = desiredHeight;
ctx.drawImage(videoPlayer, 0, 0, desiredWidth, desiredHeight);
var resizedDataUrl = canvas.toDataURL('video/webm');
videoPlayer.src = resizedDataUrl;
}
var videoUpload = document.getElementById('video-upload');
videoUpload.addEventListener('change', function(event) {
var file = event.target.files[0];
var videoPlayer = document.getElementById('video-player');
videoPlayer.src = URL.createObjectURL(file);
});
</script>
</body>
</html>
```
上記のコードは、HTMLファイル内にすべてのコードを記述しています。JavaScriptでevalを使用していないので、安全です。また、alertを含んでいないので、より使いやすくなっています。
アプリでは、ユーザーが動画ファイルを選択できるようにするために、input要素を使用しています。選択された動画ファイルは、URL.createObjectURLを使用して、video要素に動画プレーヤーとして設定されます。
ユーザーが「リサイズ」ボタンを押すと、動画プレーヤーのオブジェクトに対して、videoWidthとvideoHeightを使用して現在の動画ファイルの幅と高さを取得します。それらの値を使用して、アスペクト比を計算し、新しいアスペクト比に基づいて動画ファイルをリサイズします。リサイズ後の動画のデータURLはcanvas.toDataURLを使用して取得され、動画プレーヤーに設定されます。
このコードは、YouTubeショート動画用に動画ファイルをリサイズするシンプルなアプリです。上記のHTMLファイルを使用して、このアプリを実行することができます。ただし、動画ファイルをアップロードする前に、セキュリティ上の問題がある場合は、注意してください。
