The HTML autoplay attribute asks a media element to start playing automatically, but modern browsers often block it unless conditions like muted or user interaction are satisfied.
autoplay は <audio> / <video> を「読み込めたら自動で再生してほしい」とブラウザに要求する属性です（ただし音声ありの自動再生は多くの環境で制限されます）。
autoplay が「何を要求する/何を保証しない」か（要求 vs 実際の再生）を説明できる<audio>/<video> での最短の書き方と、muted 併用の理由を判断できるcontrols/preload/playsinline との関係を整理し、実務で事故らない設計にできるautoplay の boolean属性（有無で真偽）をひっかけ回避できるautoplay って何？ざっくり言うと、autoplay は「このメディア、最初から流しておいて」を“お願いする”スイッチです。
autoplay は“自動で再生してほしい”という要求で、必ず再生される保証ではないmuted をセットで考える：自動再生が必要なら「無音で開始 → ユーザー操作で音ON」が定番autoplay は、メディア要素が再生可能になった時点で、再生を開始することをブラウザに要求するための属性です。ただし、ブラウザの自動再生ポリシーやユーザー設定により、要求が拒否されることがあります。
autoplay は <audio> と <video> に指定します。画像や <iframe> などには使いません。
muted と組み合わせて、無音の自動再生を成立させやすくするautoplay 自体はレイアウトを変えませんが、再生開始でフレームが更新され、背景動画などでは見た目の印象が変わります。poster）や初期表示が維持されます。controls または独自UI）を検討します。HTML
<video autoplay muted playsinline loop>
<source src="movie.mp4" type="video/mp4">
</video>まずは「autoplay + muted」をセットで覚えるのが最短です。スマホで画面内再生を期待するなら playsinline も一緒に検討します。
<video autoplay muted playsinline loop>autoplay は付けず、再生ボタン（controls または独自UI）を用意するcontrols を付ける（自動再生の可否とは別に、操作手段を提供できる）preload="none"（ただし自動再生したいなら相性が悪い場合がある）外部動画ファイルなしで挙動を確認できるように、canvas.captureStream() の映像を <video> に流し込みます。無音の方は通りやすく、音あり（muted OFF）は拒否される可能性があります。
デモA：autoplay + muted（通りやすい）
ポイント：無音での自動再生は許可されやすい（ただし保証ではありません）。
デモB：autoplay（音あり想定 / 拒否されがち）
ポイント：音声あり自動再生は制限されやすく、play() が Promise reject になることがあります。
デモ出力
（ここに結果が表示されます）
JavaScript
const out = document.querySelector("#demoAutoOut");
function log(msg) {
const t = new Date().toLocaleTimeString();
out.textContent = "[" + t + "] " + msg + "\n" + out.textContent;
}
function setAttr(el, name, on) {
if (on) el.setAttribute(name, "");
else el.removeAttribute(name);
}
async function safePlay(video, label) {
try {
const p = video.play();
if (p && typeof p.then === "function") {
await p;
}
log(label + ": play() OK / muted=" + video.muted + " / autoplayAttr=" + video.hasAttribute("autoplay"));
} catch (e) {
log(label + ": play() BLOCKED / " + (e && e.name ? e.name : String(e)));
}
}autoplay は「保証」ではなく「要求」muted を付け、ユーザー操作で音をONにする導線を設計します。autoplay="false" の罠（boolean属性）autoplay は boolean属性なので、属性が存在すると真扱いです。OFFにしたいなら属性を外す（またはJSで removeAttribute("autoplay")）が基本です。preload と「すぐ再生」の期待preload="none" は読み込み節約に寄ります。自動再生してほしいのに読み込みを止めていると、当然うまくいきにくいので目的を揃えます。playsinlineplaysinline を検討します（環境差はあります）。muted を付ける、失敗時に再生ボタンを出す、video.play() の reject をログする。muted で開始している。回避：音ONはユーザー操作で切り替える（クリックで muted=false）。preload を見直す、そもそも自動再生をやめて静止画にする。playsinline 未指定。回避：playsinline を検討し、端末で確認する。autoplay は boolean属性なので「有無」が本体です。autoplay="false" のような“値でOFF”はひっかけになりやすいので、OFFは「属性を外す」と覚えるのが安全です。autoplay は <audio>/<video> の属性です。別要素に付けても意味がありません。autoplay を付けたのに再生されません。muted を付け、失敗時にユーザーが押せる再生ボタンを用意します。autoplay="false" にしたのに自動再生されます。autoplay 自体を外します。autoplay muted）し、クリック等のユーザー操作で video.muted = false に切り替える設計が定番です。muted をセットで設計する（音は後でユーザー操作）autoplay を避け、再生ボタンを主導線にするvideo.play() の reject と、muted/autoplay の状態をログで確認するplaysinline を検討し実機確認するposter）＋再生UIの“確実ルート”を作る