HTML video playsinline: request inline playback without forcing autoplay

Decide from the browser contract

An incident report embeds a short inspection clip beside the written finding. The reviewer should choose when to play it, so controls stay visible and autoplay is absent. Inline playback can preserve nearby context on a narrow screen, yet a reader may still choose fullscreen. A caption track carries speech and meaningful audio; a separate transcript or written finding carries information for people who cannot use the clip. The browser's treatment of playsinline depends on platform behavior, and leaving it out does not itself require fullscreen playback. Test the actual recording on the target mobile browsers rather than promising a fixed layout.

<section aria-labelledby="inspection-heading">
  <h2 id="inspection-heading">Inspection I-47 clip</h2>
  <video controls playsinline preload="none" width="640" height="360">
    <source src="/media/I-47-inspection.mp4" type="video/mp4">
    <track kind="captions" src="/media/I-47-captions.vtt"
           srclang="en" label="English" default>
    <p>Read the inspection finding below if video playback is unavailable.</p>
  </video>
  <p>The seal split at its upper corner before dispatch.</p>
</section>

Cost and verification

Playsinline itself has no transfer cost. The clip, caption file, poster if present, and transcript do; preload=none is only a fetch hint, so inspect network behavior on the real page. The media paths in the markup must be supplied before publication. Keep a visible finding even if the video cannot play, check caption timing, and verify keyboard access to native controls. An inline layout may need responsive CSS, but CSS should not remove the user's fullscreen option.

Common Mistakes

• Do not pair playsinline with autoplay merely to make the attribute appear to work.
• Do not treat fallback text inside video as a substitute for captions.
• Do not assume every mobile browser will render identically.

Connected lessons

• HTML video poster and preload: control the first-screen transfer
• HTML video tracks: expose controls and a caption file
• HTML video transcript: retain information beyond timed captions

Related CSS decisions

• CSS :fullscreen: lay out media after the browser enters full screen