Languages
[Edit]
EN

HTML - embedded video example

0 points
Created by:
Isaiah89
361

In this article, we would like to show you how to embed video in HTML.

Quick solution:

// ONLINE-RUNNER:browser;

<video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c0/Big_Buck_Bunny_4K.webm/Big_Buck_Bunny_4K.webm.480p.vp9.webm" controls>
  Your browser doesn't support video tag.
</video>

 

Practical example

In this example, we embed a video using HTML video element with two source elements in case the browser doesn't support the first one. We also specify additional attributes such as controls, autoplay and video size.

// ONLINE-RUNNER:browser;

<video width="320" height="240" controls autoplay>
  <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/20/Big_Buck_Bunny_keyframe_strobing_example.webm/Big_Buck_Bunny_keyframe_strobing_example.webm.360p.vp9.webm" type="video/webm">
  <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/b/b1/Big_buck_bunny_zoom_in.ogv/Big_buck_bunny_zoom_in.ogv.360p.vp9.webm" type="video/ogg">
Your browser doesn't support video tag.
</video>

 

Commonly used attributes and tags

1. height & width

The height and width attributes specify the size of the video. If you specify just one of them, the video will remain its ratio. However, it is good practice to specify height and width, otherwise the page may flicker while the video loads.

2. controls

The controls attribute adds video controls such as play/pause, volume, fullscreen, etc.

3. <source> or src

The src is used to specify the source of the video you want to embed, while <source> tags allow you to specify multiple sources in case the format is not supported by the browser.

4. text between video tags

The text between the <video> </video> tags will be displayed only if the browser doesn't support the video element.

5. autoplay

The autoplay attribute is used to start the video automatically.

6. muted

The muted attribute is used to mute the video. Used right after autoplay attribute will start the video automatically but muted.

Note:

For more information video element and it's attributes, visit the link from References section below.

References

Native Advertising
ūüöÄ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

‚̧ԳŹūüíĽ ūüôā

Join