> ## Content Index
> Fetch the complete content index at: https://blog.addpipe.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Using The HTML < video > Element To Play  Videos In Your Website
- URL: https://blog.addpipe.com/html5-video/
- Published: 2017-09-07T21:02:53.000Z
- Updated: 2026-05-21T08:26:21.000Z
- Author: Octavian
- Tags: Technology, #Import 2026-05-22 13:18

We’ve come a long way since Flash was the de facto plugin for reliably playing videos across browsers.

Today it’s as easy as adding 3 lines of HTML code:

```html
<video width="400" controls> <source src="mov_bbb.mp4" type="video/mp4"> </video>

```

The **`<video>`** element is now the standard way of embedding videos in web pages today. It’s been supported by all modern browsers for some time now and packs quite a punch.

You can use `<video>` for audio content as well, but the `<audio>` element may provide a more appropriate user experience.

Here’s a more complex example:

```html
<video controls controlsList="nodownload" width="640" height="480" poster="initialimage.png" muted> 
    <source src="videofile.mp4" type="video/mp4"> 
    <!-- fallback for browsers that don't support video tag --> 
    <a href="videofile.mp4">download video</a> 
</video>

```

The above video player:

- shows a preview image
- plays a 640×480 video that’s muted by default
- hides the download button
- has a video link as fallback for very old browsers

Feel free to **copy, paste and adapt the code to your needs**.

But the video players built in today’s browsers pack even more features:

- Display or hide the video controls, including play/pause, volume, full-screen toggle, and seek slider using the **`controls`** attribute.
- Hide the (new) download, fullscreen or remote playback buttons using the **`controlList`** attribute (Chrome 58 only, [code sample](https://googlechrome.github.io/samples/media/controlslist.html))
- Set a poster image to display while the video is downloading or not playing using the **`poster`** attribute.
- Provide a list of videos in different formats, so that each browser can play the format it supports using multiple **`<source>`** elements.
- Include closed-caption subtitles or captions in multiple languages [using the **<track>** element and WebVVT subtitles](https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio%5Fand%5Fvideo%5Fdelivery/Adding%5Fcaptions%5Fand%5Fsubtitles%5Fto%5FHTML5%5Fvideo).
- Tell the browser whether to start downloading the video when the page loads or only when the user presses Play using the **`preload`** attribute.
- Auto play the video as soon as it’s ready using the **`autoplay`** attribute
- Play the video once or in a loop using the **`loop`** attribute.
- Indicate if you’d like to play the video without sound (muted) using the **`muted`** attribute. For example, automated videos on Facebook display the mute option overlayed on the video.
- Specify the point in the video where playback should start by appending **`#t=20`** to the video’s URI ([Media Fragments URI](https://www.w3.org/TR/media-frags/), [sample](http://www.annodex.net/~silvia/itext/mediafrag.html#t=300))
- The the **`playbackRate`** and **`defaultPlaybackRate`** attributes, [accessible via the DOM](https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio%5Fand%5Fvideo%5Fdelivery/WebAudio%5FplaybackRate%5Fexplained), allow us to control the playback speed of the video
- Specify the video should play inline in Safari on iOS 10+ using the new **`playsinline`** attribute

Powerful as they might be some things are not covered. For showing ads, using playlists and analytics you should consider commercial solutions like [JW Media Player](https://www.jwplayer.com/), [Flow Player](https://flowplayer.com/) and [Cloudinary](http://cloudinary.com/documentation/cloudinary%5Fvideo%5Fplayer) or the open source [video.js](https://github.com/videojs/video.js). Cloudinary also has a [HTML5 video player comparison](http://cloudinary.com/blog/html5%5Fvideo%5Fplayer) with many other solutions listed.