Use the HTML
<video> element to embed video content in a document.
Flow content, phrasing content, embedded content. If it has a |
|Tag omission||None, both the starting and ending tag are mandatory.|
|Permitted parents||Any element that accepts embedded content.|
|Permitted ARIA roles|| |
|DOM interface|| |
Like all other HTML elements, this element supports the global attributes.
Sites which automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so it should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control.
<canvas>element without being tainted. The allowed values are:
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.
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.
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.
TimeRangesobject indicating all the ranges of the video that have been played.
none: indicates that the video should not be preloaded.
metadata: indicates that only video metadata (e.g. length) is fetched.
auto: indicates that the whole video file could be downloaded, even if the user is not expected to use it.
If not set, its default value is browser-defined (i.e. each browser may have its default value). The spec advises it to be set to
autoplayattribute has precedence over
autoplayis specified, the browser would obviously need to start downloading the video for playback.
<source>element within the video block to specify the video to embed.
<video> element can fire many different events.
<video>element contains one or more video sources. To specify a video source, use either the
srcattribute or the
<source>element; the browser will choose the most suitable one. For a list of supported formats, see Media formats supported by the audio and video elements.
<!-- Simple video example --> <video src="videofile.webm" autoplay poster="posterimage.jpg"> Sorry, your browser doesn't support embedded videos, but don't worry, you can <a href="videofile.webm">download it</a> and watch it with your favorite video player! </video> <!-- Video with subtitles --> <video src="foo.webm"> <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.
This example offers three different sources for the media; this allows the video to be watched regardless of which video codecs are supported by the browser; first WebM is tried. If that can't be played, then MP4 is tried. Finally, OGG is tried.
<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" > <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm"> <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"> 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.
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.
|WHATWG HTML Living Standard |
The definition of '<video>' in that specification.
|Feature||Chrome||Edge||Firefox (Gecko)||Internet Explorer||Opera||Safari|
|Basic support||3.0||(Yes)||3.5 (1.9.1)||9.0||10.5||3.1|
|Feature||Android||Edge||Firefox Mobile (Gecko)||IE Mobile||Opera Mobile||Safari Mobile|
|Basic support||?||(Yes)||1.0 (1.0)||?||?||?|
 As of iOS 10, autoplay is allowable only for videos that have no sound or have the audio track disabled
videoelement (HTML5 specification)
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.