HTML Basics: Video Embedding Made Easy – Essential Tips for Adding Multimedia to Your 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 their 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

Due to licensing reasons, different video formats are supported depending on the browser. Each browser supports either one or the other video format.

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.

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

• MP4 – MIME-type video/mp4

• WebM – MIME-type video/webm

• OGG – MIME-type video/ogg

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.

Integrate a video player in a web page using the <video> tag

The controls attribute is used to display a control panel so that the user can access the Play, Pause, and Volume (loudness) controls. This attribute should always be specified.

The type attribute is required since there are different video formats which are either supported or not by a certain browser.

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.