iOS Video Playback — playsinline & Autoplay Demo

Toggle the attributes a <video> can carry, then press Reload to rebuild the element and play() to trigger playback. The event log shows what the browser actually did — including iOS's tell-tale fullscreen takeover when playsinline is missing.

Live video

idle

Attributes

playsinline + webkit-playsinline Play inline. Without it, iOS iPhone forces the native fullscreen player. muted (property) Required for autoplay. Set as a JS property, not just an attribute. autoplay Tries to play on load. Only honored if also muted + playsinline. loop Restart on end — typical for background hero video. controls Native play/scrub UI. A user tap on these always counts as a gesture. poster First-frame placeholder before playback (uses a generated frame here).

Event log

What to expect

On a real iPhone: uncheck playsinline and press play() — the video jumps into the native fullscreen player (you'll see a webkitbeginfullscreen event logged). Re-check it to keep playback inline. Trên iPhone thật: bỏ playsinline rồi bấm play() — video sẽ nhảy sang trình phát toàn màn hình. Bật lại để phát nội tuyến.

Autoplay: on load it only works with muted + playsinline + autoplay all on. Uncheck muted and Reload — the play() promise rejects with NotAllowedError (logged in red) because unmuted autoplay needs a user gesture. Autoplay khi tải trang chỉ chạy khi bật cả ba: muted + playsinline + autoplay. Bỏ muted → promise của play() bị từ chối (NotAllowedError).

Low Power Mode: iOS blocks even muted autoplay when Low Power Mode is on. Always provide a tap-to-play fallback for the rejected promise. Chế độ tiết kiệm pin: iOS chặn cả autoplay đã muted. Luôn có nút chạm-để-phát dự phòng cho promise bị từ chối.

// iOS Video Playback — playsinline & Autoplay