Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

video

The <video> element is used to render videos and optionally offer controls to the viewer. We have an in-depth video tutorial series that you can reference to learn how to customize this element using JavaScript.

Code Example

<video src="myVideo.mp4" width="500" height="280" controls autoplay> <!-- Fallback content like embed or object elements could go here for old browser software --> </video> You can define the source file to play by using the <source> element instead of the video element's "src" attribute. The source element also allows you to designate multiple video streams for the video element.

Attributes

globals - the global attributes common to all elements possible values: see global attribute list autoplay - specify if the video should auto play when the video file is buffered enough possible values: value not required controls - provide browser dependent stock video player controls possible values: value not required crossorigin - specify how the element handles crossorigin requests possible values: "anonymous", "use-credentials" height - specify the video height possible values: "integer", "percentage" loop - specify if the video should play again when it ends possible values: value not required mediagroup - group media elements together possible values: MediaController name muted - specify if the video should be muted by default possible values: value not required poster - specify an image to show the user while no video data is available possible values: "path/to/file" preload - Hints how much buffering the media resource will likely need possible values: "none", "metadata", "auto" src - path to the media resource possible values: "path/to/filename" width - specify the video width possible values: "integer", "percentage"

JavaScript DOM Interface

The attributes(object properties) listed above can be changed or set using JavaScript. <video id="vid"></video> <script> var vid = document.getElementById("vid"); vid.src = "myVideo.mp4"; vid.width = "500"; vid.controls = true; vid.play(); </script> The following extra properties are available when working with a video object in JavaScript:

width - get/set the display width of the video. height - get/set the display height of the video. videoWidth - The intrinsic width of the video. videoHeight - The intrinsic height of the video. poster - get/set the poster attribute value.

HTML

Elements

aabbraddressareaasidearticleaudiobbasebdobdiblockquotebodybrbuttoncanvascaptioncitecodecolcolgroupdatadatalistdddeldetailsdfndialogdivdldtemembedfieldsetfigcaptionfigurefooterformh1 h2 h3 h4 h5 h6headheaderhrhtmliiframeimginputinskbdkeygenlabellegendlilinkmainmapmarkmetameternavnoscriptobjectoloptgroupoptionoutputpparampreprogressqrb rp rt rtc rubyssampscriptsectionselectsmallsourcespanstrongstylesub supsummarytabletbodytdtemplatetextareatfootththeadtimetitletrtrackuulvarvideowbr