In this blog post, we’ll take a deeper look at 10 of those advanced features and explain with code examples how you can use them on your website in your HTML video players. Specifying multiple sources for a video.Showing or hiding the video player’s controls.Start or stop the video at a certain point or timestamp.Show a video poster or thumbnail before the video is started.

Showing captions or subtitles during playback.Accessing more functionality through JavaScript.Fitting portrait videos in landscape players using the object-fit CSS property.Not all browsers support all video containers and codecs. To suit all browsers you can provide multiple video files as the source for one video player. Multiple sources can be specified by using elements. It is also recommended that you specify the MIME type using the optional type attribute. Showing or hiding the video player’s controlsĬontrols like play/pause, volume, full-screen toggle and the seek slider can easily be toggled using the controls attribute: If only one video format is available, it can be specified directly using the src attribute: The list of sources is tried from top to bottom.

Some specific controls can be hidden separately by using the controlsList attribute (Chrome 58+ only), for example: If you don’t specify the attribute the controls won’t be shown. In the example above the fullscreen and download buttons have will be turned off or hidden but only if the user is on Chrome. You can find more examples on how to control the default Chrome video player UI here. Start or stop the video at a certain point or timestamp #Chrome autoplay video html how to

#t=10 => results in the time interval [10,end) Show a video poster or thumbnail before the video is started #t=,20 => results in the time interval [0,20) In this example, the video playback will start at second 15 and end at second 20: Using Media Fragments (the #t= anchor in the src) you can specify the time at which the video should start playback and end playback. Auto – the audio/video should start loading as soon as the page tadata – only the metadata is preloaded: dimensions, first frame, track list, duration, etc.If the video is not played automatically it’s a good idea to show a video thumbnail and thus give viewers a glimpse of the content.įor the video to have a poster you simply need to add the poster attribute and the URL to the poster image: Ī video can be preloaded in multiple ways by adding the preload attribute.