Avatar of Anna

Tips for inserting an HTML video in your web

0 rating, 0 votes0 rating, 0 votes (0 rating, 0 votes, rated)
You need to be a registered member to rate this post.
Loading ... Loading ...

October 3, 2017 in Video


The audiovisual elements are not only characterized by attracting attention and delight visitors to a website. Major search engines reward the added value of multimedia content. In particular, videos allow you to personalize your website information, as well as represent products and services in a much more detailed and precise way than simply with images and text. However, for some time the integration of videos in the web pages was a complicated task, especially since the visualization of multimedia contents requires the installation of plugins for the browser (eg Adobe Flash Player). Therefore, when the user does not have the necessary add-ons in the terminal or has not updated them regularly, there are usually problems of incompatibility and failures in security.

Likewise, complicated insertion codes forced vendors to invest a lot of time in converting videos to appropriate formats, for example, SWF. Fortunately, these types of complications will soon be history. Since the fifth version of the hypertext markup language (HTML) a native element is available with which it is possible to integrate videos as content in the code of the web page. Alternatively, there is the possibility of hosting the videos in external providers such as YouTube or Vimeo. Here’s how to do it.

HTML5: Easily integrate your videos
Inserting videos with HTML5 is a very simple task. All that is needed is a native element that can be extended by special attributes. The following code shows how to add video resources to your web source code

In the example, the element contains the URL where the video is hosted ( scr = “example.mp4 “), as well as the attributes that define how the video will be displayed on the web: width, height, controls and image preview. The text that appears in the middle is only displayed when a browser can not display the video. Usually, web operators use this feature to provide an alternate description and download link.

Additional attributes of an HTML5 video element
To integrate a resource through the element, it must contain a link to the resource, either as a scr attribute or a ” source” child element . To modify and manage a video element it is possible to use the following attributes:

Attribute and Function
Width/height The width and height attributes allow you to specify the dimensions of the video to the browser. If it is not done, it will default to the size information contained in the video file. The browser will automatically resize if only one of the values is specified.
ControlsThe controls attribute enables you to activate the web browser control bar. Alternatively, it is also possible to define your own controls through JavaScript.
Poster The poster attribute refers to the image file that will be used as a preview of the video. If it is not defined, the first frame of the video will be used as a preview.
Autoplay The autoplay attribute tells the browser to automatically play the video once the web upload is complete.
loop With loop the video will be looped.
Muted To mute the tone of the video, the muted attribute is used.
Preload The preload attribute suggests to the browser how the video should be uploaded after downloading from the web page. The options for this are: auto (fully loaded), preload (video loads certain metadata) and none (prevents preloading of video data).

Browsers without HTML5 support
Current versions of the most common web browsers support HTML5. Even if you want videos on your website to be accessible to users who do not have the latest updates, you can use text links inside the element, offering them independent downloadable files. In this way, the user receives an alternative text with which you can download the video and view it in your local video player.

The chaos of the HTML5 codec
The HTML5 specification defines the element and its respective programming interfaces (APIs), but does not specify the encoding of the video. For this reason, the choice of format is often a problem for webmasters. WebM, Ogg Theora or H.264 / MPEG4 are formatting with their respective advantages and disadvantages, which has prevented the major web browsers have been able to agree. While Internet Explorer and Safari decided on the H.264 / MPEG4 format , a format available since 2013 almost universally, Firefox, Chrome and Opera support free formats such as Ogg Theora and WebM.

To avoid incompatibilities, it is recommended to provide the videos in different formats. To do this, the element allows you to insert videos through the source child element and mark them with the type attribute so that they can be recognized by the web browser.

In case other source elements with the type attribute are integrated into the element, the web browser will automatically select the video format to which it gives preference. It should be noted that to insert a video with this procedure, the element cannot contain src attributes.

Integrate audiovisual content from video platforms
If you do not want to save videos to your server and prefer to host them externally, you can integrate them using an embed code from YouTube or Vimeo. This type of platforms guarantees the compatibility of the content with the most common browsers, obtaining a correct visualization in the majority of output devices. With the external hosting of the videos, the transmission load does not fall on the server itself. However, web operators should be informed in advance about the conditions of use of this type of platforms and adjust the insertion code, also known as “embedded code”, to their needs.

If you want to insert a video from YouTube you just have to find it and request the corresponding code. Here you can also define some aspects of the general settings, such as dimensions or subtitles. To prevent the playback of external content on your website, it is advisable to disable the alternate videos preview function. In the worst case could be videos of your direct competitors as a result of content seen by other users related to identical search criteria.

Infowars.com Videos:

Comment on this article:

Leave a reply

You must be logged in to post a comment.