How to add audio and video

Add native media

Use HTML5 audio and video instead of obsolete plugins.

<audio controls>
  <source src="/media/interview.mp3" type="audio/mpeg">
  Your browser cannot play this audio.
</audio>

<video controls width="640" poster="/images/lesson-poster.jpg">
  <source src="/media/lesson.mp4" type="video/mp4">
  <track kind="captions" src="/media/lesson-en.vtt"
         srclang="en" label="English" default>
</video>

Provide controls and alternatives

• Include controls so keyboard and pointer users can operate playback
• Caption spoken words and meaningful sounds in video
• Provide a transcript for audio content
• Supply fallback text or a download link

Avoid disruptive playback

Do not autoplay sound. If muted autoplay is justified, users still need an obvious pause control. Respect reduced-motion preferences and avoid looping distracting media beside text.

Publish efficiently

Compress media, provide a useful poster image, and test on mobile. Multiple source elements can offer compatible formats; use the correct MIME type and host only media you have permission to publish.