DONATE  
MENU
AJAX
JSON
HTML
JAVASCRIPT

HTML Tutorials

INTRODUCTION

» Introduction to HTML

» PRACTICE IT Editor

» Getting Started

» HTML Example

» HTML Tags

» HTML Elements

» Nesting Tags

» Block & Inline Elements

» HTML Attributes

» HTML Comments

» File Paths

» HTML Entities & Symbols

TAGS/ELEMENTS

» Important Tags

» HTML Headings

» Text Formatting

» HTML Links

» HTML Lists

» HTML Tables

» HTML Images

» HTML Audios

» HTML Videos

» HTML Iframes

» HTML Styles

» HTML Scripts

» Semantic Elements

» HTML Metadata

ATTRIBUTES

» Elements' ID

» Elements' Class

» Elements' Style

» Element's Align

» Element's Height & Width

HTML FORMS

» HTML Forms

» Input Elements

» HTML Textarea

» HTML Select

HTML EXAMPLE

» Login Page

.. » HTML » Tags/elements » HTML Videos
Share Tweet WhatsApp

HTML Videos

Almost like the <audio> tag, the HTML <video> tag is used in creating video elements. EXAMPLE
<video controls><source src='my_video_file_path.mp4' type='video/mp4'/>Video file not supported.</video>
<video controls><source src='my_video.mp4' type='video/mp4'/>Video file not supported.</video>

Copy PRACTICE IT

EXPLAINED The <video> tag defines a video element. The controls keyword contained in the opening tag helps your video element have basic options or controls such as play, pause, volume and etcetera, which may vary from browser to browser. Inside the video element is also the <source> tag which is generally used in defining media files for media elements. There is also a text (Video file not supported.), which is a text to display when any browser doesn't support the video element or file. The source element have an src attribute to specify the path to the video file and a type attribute to specify the media type of the video file. You can specify as many <source> elements from which a browser can select one. The browser will usually select the first <source> element with a video type it supports.
<video controls>
<source src='myvideo.mp4' type='video/mp4'/>
<source src='myvideo.ogg' type='video/ogg'/>
Video file not supported.</video>
VIDEO MEDIA TYPES
MEDIA TYPEFORMATS/EXTENSION
video/mp4.mp4
dw.wav
video/ogg.ogg
VIDEO HEIGHTS AND WIDTHS Just like images, video files are inline - block elements whose height and width can be adjusted either via CSS or using the height and width attributes. Such heights and widths can be specified in either percentage or pixels.
<video height='350px' width='100%' controls><source src='my_video.mp4' type='video/mp4'/>Video file not supported.</video>

Copy PRACTICE IT

VIDEO AUTOPLAY You can immediately start playing a video element when a webpage loads. This is called auto - play. That is, no need to click a button to start playing a video. To auto - play any video element, you use the autoplay keyword with either the controls keyword or just alone.
<video height='350px' width='100%' controls autoplay><source src='my_video.mp4' type='video/mp4'/>Video file not supported.</video>

<video height='350px' width='100%' autoplay><source src='my_video.mp4' type='video/mp4'/>Video file not supported.</video>
<video height='350px' width='100%' autoplay><source src='my_video.mp4' type='video/mp4'/>Video file not supported.</video>

Copy PRACTICE IT

SUMMARY
  1. HTML video elements are created with the <video> tag.
  2. The video element have keywords such as controls to help our video element have basic controls like play/pause and autoplay to automatically play videos when a webpage loads.
  3. Inside the video element is the <source> elements to specify one or more media formats of a video from which a browser can choose from and finally, a text to display when a browser doesn't support the video element.
  4. Videos are inline - block elements meaning we can resize their widths and height according to our desire.
Take a short quiz on HTML Videos.
Ask a question or tell us if HTML Videos is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode