HTML Basics: Get Noticed – The Ultimate Guide to Embedding Video Content on Your Web Page

Add a Video Player to Your Web Page

Want to add a video player to a web page without knowing how to add a media player to HTML pages? The new HTML5 VIDEO tag is used to add video content to an HTML page. This makes it easy to add a video, such as a movie clip, to your web page without having to use any video plug-in.

All recent web browsers, including mobile versions, support the video command very well. There are no compatibility issues with video playback.

The HTML5 VIDEO-Tag adds native support to playback a video within an HTML page.

The video tag of HTML5 is a standard technique for including video into a web page. Unfortunately, browser manufacturers have yet agreed on a common standard for which video codecs should (or can or must) be used.

The HTML <video> Tag

WebM is an open-source alternative to the proprietary MPEG4 and H.264 standards. While WebM is typically smaller than MP4, MP4 offers better cross-platform and cross-device compatibility. MP4 is also supported by the overwhelming majority of video players on the market.

Why do two different video formats exist, which are supported or not supported depending on the browser? To keep this from becoming too simple, the browsers only support one or the other video format for licensing reasons.

For the basic functionality of the HTML5 video player, it is sufficient to specify only the video URL in the <video> tag. Add the video URL by using either the src attribute of the <video> tag or by nesting one or more <source> tags between the opening and closing video tags.

The video tag starts with <video> and has to be closed with </video>.

To embed a video player, insert the following code into your web page.

Example Output of the HTML code

A control panel is displayed when the controls attribute is specified. This allows the user to change the volume or pause and start playback. The controls attribute should always be specified.

The type attribute is required since there are different video formats which are either supported or not supported for licensing reasons, depending on the browser and browser version.

• mp4 – MIME-type video/mp4

• WebM – MIME-type video/webm

• ogg – MIME-type video/ogg

The MP4 format is supported by all current browsers. You only need to specify the Ogg video format if older browsers must also be supported.

Additional Attributes for the Video Player

• The width and height attributes in the <video> tag specify the size of the video player in pixels. The two values must be specified without a unit. As a general rule, the size should match the native size of the video.

• preload attribute
  This attribute is used to specify how the video file should be loaded. The following values are possible: auto, metadata, none.

  With preload="auto" the browser automatically decides what to preload.

  With preload="metadata" Only metadata (such as name and duration) is preloaded. No actual video data is preloaded.

  With preload="none" no data is preloaded. The video will not start loading until the play button is clicked.

  The video should never be loaded without the explicit consent of the user.

• autobuffer attribute
  The autobuffer property is usually not activated. So the video is not downloaded until the play button is clicked. Automatic buffering is enabled by the autobuffer attribute. This will cause the video to load fully upon opening the web page. However, this is usually not desired.

• autoplay attribute
  The video starts playing as soon as the web page is loaded. This can be annoying for visitors.

• loop attribute
  This plays the video in an endless loop. As a rule, this is particularly unpleasant for visitors and is usually perceived as annoying.

• volume attribute (loudness)
  With volume="start value" will set the initial volume level to any value between 0.0 and 1.0. You should not set the initial volume to a value higher than 0.25 (i.e. 25 percent).

• muted attribute
  This attribute is used to mute the audio playback. The visitor then needs to adjust the volume level individually using the volume regulator.

  This setting is optimal for most types of web pages. But it is not recommended to enable the muted property for video galleries.