Problem Statement
Which attribute adds playback controls to an HTML5 video?
Explanation
The controls attribute adds built-in playback controls to an HTML5 video element. These controls typically include a play and pause button, progress bar, volume control, and fullscreen toggle. Without the controls attribute, the video will display but users will not be able to interact with it unless you create custom controls using JavaScript. The video tag has several other useful attributes. The width and height attributes set the video dimensions. The autoplay attribute starts playing automatically, though browsers often block this unless the video is also muted. The loop attribute repeats the video continuously. The muted attribute starts with sound off. The poster attribute specifies an image to show before the video plays. Like the audio tag, you should include multiple source tags with different video formats for browser compatibility. Common formats are MP4, which is most widely supported, WebM for Chrome and Firefox, and OGG. Always include fallback text for browsers that do not support the video element.
Code Solution
SolutionRead Only
<!-- Basic video with controls --> <video controls width="640" height="360"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> Your browser does not support the video tag. </video> <!-- With poster image --> <video controls poster="thumbnail.jpg"> <source src="video.mp4" type="video/mp4"> </video> <!-- Autoplay muted (for backgrounds) --> <video autoplay muted loop> <source src="background.mp4" type="video/mp4"> </video>
