[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/ru/docs/Web/HTML/Reference/Elements/video#height [Back]  [Original]
<video> - HTML | MDN
HTML

HTML: Markup language

HTML reference
HTML guides
Markup languages
CSS

CSS: Styling language

CSS reference
CSS guides
Layout cookbook
JavaScriptJS

JavaScript: Scripting language

JS reference
JS guides
Web APIs

Web APIs: Programming interfaces

Web API reference
Web API guides
All

All web technology

Technologies
Topics
Learn

Learn web development

Frontend developer course
Learn HTML
Learn CSS
Learn JavaScript
Tools

Discover our tools

About

Get to know MDN better

Blog
Toggle sidebar
  1. -
  2. HTML
  3. HTML
  5. <video>
Theme
  • OS default
  • Light
  • Dark
Remember language Learn more

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

<video>

Baseline
Widely available
*

This feature is well established and works across many devices and browser versions. Its been available across browsers since 2015 ..

* Some parts of this feature may have varying levels of support.

HTML <video>. . , src <source>; .

, .

In this article

Content categories Flow content, , . controls: .
Tag omission , .
, .
DOM HTMLVideoElement

HTML-, .

autoplay

; , , , .

autobuffer

; , , . , , . , .

: , HTML5 autobuffer , . Gecko 2.0 , . preload, autobuffer . Firefox bug 548523

buffered

. TimeRanges.

controls

, , , , , .

crossorigin

This enumerated attribute indicates whether to use CORS to fetch the related image. CORS-enabled resources can be reused in the <canvas> element without being tainted. The allowed values are:

anonymous

Sends a cross-origin request without a credential. In other words, it sends the Origin: HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header), the image will be tainted, and its usage restricted.

use-credentials

Sends a cross-origin request with a credential. In other words, it sends the Origin: HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the image will be tainted and its usage restricted.When not present, the resource is fetched without a CORS request (i.e. without sending the Origin: HTTP header), preventing its non-tainted used in <canvas> elements. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.

height

.

loop

; , , .

muted

, , . , . - "", , , .

played

TimeRanges, .

preload

, , , , . :

  • none: , .
  • metadata: , (, ).
  • auto: , , .
  • : auto. , ( , ). metadata.

    :

    • The autoplay attribute has precedence over preload. If autoplay is specified, the browser would obviously need to start downloading the video for playback.
    • The specification does not force the browser to follow the value of this attribute; it is a mere hint.
poster

URL-, , , . , , ; .

src

The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed.

width

.

The <video> element can fire many different events.

html
<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="videofile.ogg">download it</a>
  and watch it with your favorite video player!
</video>

<!-- Video with subtitles -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English" />
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska" />
</video>

The first example plays a video, starting playback as soon as enough of the video has been received to allow playback without pausing to download more. Until the video starts playing, the image "posterimage.jpg" is displayed in its place.

The second example allows the user to choose between different subtitles.

Multiple Sources Example

html
<video
  width="480"
  controls
  poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif">
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4"
    type="video/mp4" />
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv"
    type="video/ogg" />
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm"
    type="video/webm" />
  Your browser doesn't support HTML5 video tag.
</video>

You can try the preceding example on HTML5 video demo example with live preview code editor.

Server support

If the MIME type for the video is not set correctly on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).

If you use Apache Web Server to serve Ogg Theora videos, you can fix this problem by adding the video file type extensions to "video/ogg" MIME type. The most common video file type extensions are ".ogm", ".ogv", or ".ogg". To do this, edit the "mime.types" file in "/etc/apache" or use the "AddType" configuration directive in httpd.conf.

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

If you serve your videos as WebM, you can fix this problem for the Apache Web Server by adding the extension used by your video files (".webm" is the most common one) to the MIME type "video/webm" via the "mime.types" file in "/etc/apache" or via the "AddType" configuration directive in httpd.conf.

AddType video/webm .webm

Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.

DOM

HTMLVideoElement.

Help improve MDN

Was this page helpful to you?
Yes No
Learn how to contribute

This page was last modified on 4 . 2025 . by MDN contributors.

View this page on GitHub Report a problem with this content
Clear filter input
  1. HTML
    1. Cheatsheet
    2. Comments
    5. Date and time formats
    6. Microdata
    7. Microformats
    8. (Quirks Mode) (Standards Mode)
  3. How to
  4. Define terms with HTML
  5. data-*
  6. canvas
  7. Add a hitmap on top of an image
  8. Tips for authoring fast-loading HTML pages
  9. Add JavaScript
    1. <a>
    2. <abbr>
    3. <acronym>
    4. <address>
    5. <area>
    6. <article>
    7. <aside>
    8. <audio>
    9. <b>
    10. <base>
    11. <bdi>
    12. <bdo>
    13. <big>
    14. <blockquote>
    15. <body>
    16. <br>
    17. <button>
    18. <canvas>
    19. <caption>
    20. <center>
    21. <cite>
    22. <code>
    23. <col>
    24. <colgroup>
    25. <data>
    26. <datalist>
    27. <dd>
    28. <del>
    29. <details>
    30. <dfn>
    31. <dialog>
    32. <dir>
    33. <div>
    34. <dl>
    35. <dt>
    36. <em>
    37. <embed>
    38. <fencedframe>
    39. <fieldset>
    40. <figcaption>
    41. <figure>
    42. <font>
    43. <footer>
    44. <form>
    45. <frame>
    46. <frameset>
    47. <geolocation>
    48. <h1>
    49. <head>
    50. <header>
    51. <hgroup>
    52. <hr>
    53. <html>
    54. <i>
    55. <iframe>
    56. <img>
    57. <input>
    58. <ins>
    59. <kbd>
    60. <label>
    61. <legend>
    62. <li>
    63. <link>
    64. <main>
    65. <map>
    66. <mark>
    67. <marquee>
    68. <menu>
    69. <meta>
    70. <meter>
    71. <nav>
    72. <nobr>
    73. <noembed>
    74. <noframes>
    75. <noscript>
    76. <object>
    77. <ol>
    78. <optgroup>
    79. <option>
    80. <output>
    81. <p>
    82. <param>
    83. <picture>
    84. <plaintext>
    85. <pre>
    86. <progress>
    87. <q>
    88. <rb>
    89. <rp>
    90. <rt>
    91. <rtc>
    92. <ruby>
    93. <s>
    94. <samp>
    95. <script>
    96. <search>
    97. <section>
    98. <select>
    99. <selectedcontent>
    100. <slot>
    101. <small>
    102. <source>
    103. <span>
    104. <strike>
    105. <strong>
    106. <style>
    107. <sub>
    108. <summary>
    109. <sup>
    110. <table>
    111. <tbody>
    112. <td>
    113. <template>
    114. <textarea>
    115. <tfoot>
    116. <th>
    117. <thead>
    118. <time>
    119. <title>
    120. <tr>
    121. <track>
    122. <tt>
    123. <u>
    124. <ul>
    125. <var>
    126. <video>
    127. <wbr>
    128. <xmp>
  12. A
    1. accept
    2. autocomplete
    3. capture
    4. content
    5. CORS settings attributes
    6. dirname
    7. disabled
    8. elementtiming
    9. fetchpriority
    10. for
    11. form
    12. integrity
    13. max
    14. maxlength
    15. min
    16. minlength
    17. multiple
    18. HTML attribute: pattern
    19. placeholder
    20. readonly
    21. rel
    22. required
    23. size
    24. step
    1. accesskey
    2. anchor
    3. autocapitalize
    4. autocorrect
    5. autofocus
    6. class
    7. contenteditable
    8. data-*
    9. dir
    10. draggable
    11. enterkeyhint
    12. exportparts
    13. headingoffset
    14. headingreset
    15. hidden
    16. id
    17. inert
    18. inputmode
    19. is
    20. itemid
    21. itemprop
    22. itemref
    23. itemscope
    24. itemtype
    25. lang
    26. nonce
    27. part
    28. popover
    29. slot
    30. spellcheck
    31. style
    32. tabindex
    33. title
    34. translate
    35. virtualkeyboardpolicy
    36. writingsuggestions
  14. Attributes by element
    1. <input>
      1. <input type="button">
      2. <input type="checkbox">
      3. <input type="color">
      4. <input type="date">
      5. <input type="datetime-local">
      6. <input type="email">
      7. <input type="file">
      8. <input type="hidden">
      9. <input type="image">
      10. <input type="month">
      11. <input type="number">
      12. <input type="password">
      13. <input type="radio">
      14. <input type="range">
      15. <input type="reset">
      16. <input type="search">
      17. <input type="submit">
      18. <input type="tel">
      19. <input type="text">
      20. <input type="time">
      21. <input type="url">
      22. <input type="week">
    2. <script type>
      1. importmap
      2. speculationrules
    3. <meta name>
      1. color-scheme
      2. referrer
      3. responsive-embedded-sizing
      4. robots
      5. text-scale
      6. theme-color
      7. viewport
    4. <meta http-equiv>
  15. Attribute values
    1. <link rel> keywords
      1. alternate stylesheet
      2. compression-dictionary
      3. dns-prefetch
      4. manifest
      5. me
      6. modulepreload
      7. noopener
      8. noreferrer
      9. preconnect
      10. prefetch
      11. preload
      12. prerender
MDN

Your blueprint for a better internet.

MDN
Contribute
Developers
Mozilla

Portions of this content are 19982026 by individual mozilla.org contributors. Content available under a Creative Commons license.

Web Proxy Viewer  |  New URL  |  Original Page