index.htmlファイル１つだけの、S3にアップロードして、videoタグで再生するだけの動画アップローダー（認証なし）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
# 404なら、そのバケット名は使える！ aws s3api head-bucket --bucket video-uploader # 【STEP 1：バケット作成】 aws s3api create-bucket \ --bucket video-uploader \ --region ap-northeast-1 \ --create-bucket-configuration LocationConstraint=ap-northeast-1 # 【STEP 2：パブリックアクセス許可】 aws s3api put-public-access-block \ --bucket video-uploader \ --public-access-block-configuration BlockPublicAcls=false,IgnorePublicAcls=false,BlockPublicPolicy=false,RestrictPublicBuckets=false # 【STEP 3：バケットポリシー追加】最初にpolicy.jsonファイル作って、それで設定。 cat <<EOF > policy.json { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadWriteList", "Effect": "Allow", "Principal": "*", "Action": [ "s3:GetObject", "s3:PutObject", "s3:ListBucket" ], "Resource": [ "arn:aws:s3:::video-uploader", "arn:aws:s3:::video-uploader/*" ] } ] } EOF aws s3api put-bucket-policy \ --bucket video-uploader \ --policy file://policy.json # 【STEP 4：静的ウェブサイトホスティング有効化】 aws s3api put-bucket-website \ --bucket video-uploader \ --website-configuration '{ "IndexDocument": { "Suffix": "index.html" } }' #【STEP 5:CORS設定ファイルを作成】最初にcors.jsonファイル作って、それで設定。 cat <<EOF > cors.json { "CORSRules": [ { "AllowedHeaders": ["*"], "AllowedMethods": ["GET", "PUT", "POST"], "AllowedOrigins": ["*"], "ExposeHeaders": ["ETag"], "MaxAgeSeconds": 3000 } ] } EOF aws s3api put-bucket-cors \ --bucket video-uploader \ --cors-configuration file://cors.json |
ローカルにindex.htmlを生成して、それをS3にアップロード
|
1 |
aws s3 cp index.html s3://video-uploader/index.html |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>簡易動画アップローダー</title> </head> <body> <h1>動画アップローダー（認証なし）</h1> <input type="file" id="videoFile" accept="video/*"> <button onclick="upload()">アップロード</button> <h2>アップロード済み動画一覧</h2> <div id="videoList">読み込み中...</div> <script> const bucketName = 'video-uploader'; // ←自分のバケット名に変更 const region = 'ap-northeast-1'; // ←東京リージョンなど、S3バケットのリージョン const baseUrl = `https://${bucketName}.s3.{region}.amazonaws.com/`; async function upload() { const fileInput = document.getElementById("videoFile"); const file = fileInput.files[0]; if (!file) { alert("動画ファイルを選んでください"); return; } const uploadUrl = baseUrl + encodeURIComponent(file.name); const res = await fetch(uploadUrl, { method: "PUT", body: file, headers: { "Content-Type": file.type } }); if (res.ok) { alert("アップロード成功"); listVideos(); } else { alert("アップロード失敗"); } } async function listVideos() { const listUrl = `https://${bucketName}.s3.{region}.amazonaws.com?list-type=2`; const res = await fetch(listUrl); const text = await res.text(); const parser = new DOMParser(); const xml = parser.parseFromString(text, "application/xml"); const contents = xml.getElementsByTagName("Contents"); const videoList = document.getElementById("videoList"); videoList.innerHTML = ""; for (let item of contents) { const key = item.getElementsByTagName("Key")[0].textContent; const url = baseUrl + encodeURIComponent(key); const video = document.createElement("video"); video.src = url; video.controls = true; video.width = 320; video.style.display = "block"; video.style.marginBottom = "10px"; const title = document.createElement("div"); title.textContent = key; videoList.appendChild(title); videoList.appendChild(video); } } // 初期表示で一覧読み込み listVideos(); </script> </body> </html> |