How to embed a video on a page using HTML5, the video tag

23.07.18 IT / Html 5613

Make video playback on the site - today the need to implement such functionality is quite common. Previously, the object tag and third-party tools, various plugins, most often the popular flash player, were used for this. But with the development of web technologies, everything has become easier, now, to play a video on the site, it is enough to apply one tag - video .

Let's see below how to use the new video tag. Also, keep in mind that you can apply CSS styles to give your player a unique look. The basic code for placing the player is as follows:

  & lt; video src = "file.mp4" controls> & lt; / video>  

As for the attributes, here some of them work the same as in tag audio tag. The controls attribute tells the browser to show the player control buttons, src indicates the path to the file. For different browsers, you should set different video formats, since they have different video codec support. This is done using the nested source tag. And since some browsers may still not support the new tag, it is better to use a generic solution that uses the object tag for older browsers:

  & lt; video width = "300" height = "200" controls>
& lt; source src = "file.webm" type = "video / webm">
& lt; source src = "file.mp4" type = "video / mp4">
& lt; source src = "file.ogv" type = "video / ogg">
& lt; object data = "file.swf" type = "application / x-shockwave-flash">
& lt; param name = "video" value = "file.swf">
& lt; / object>
& lt; / video>  

As you can see, you should specify the MIME type for each file. In order to make sure that the browser can process videos in the correct format, you can create an .htaccess file in the folder where your web page is located, defining the MIME types for the video:

• AddType video / webm .webm
• AddType video / mp4 .mp4
• AddType video / ogg .ogv

What video codecs and formats are supported by browsers ? Let's see below:

• WebM / VP8 - supported in Chrome, Firefox4, Opera;
• MP4 - Supported on Windows Phone 7, Safari, IE9, iPhone, iPad, Android;
• Ogg / Vorbis - Supported in older Firefox and Opera browsers.

What are the attributes of the video tag? Let's list below:

• autoplay - auto play video after loading the page;
• controls - show controls;
• height - player height in px or % ;
• loop - loop file playback;
• muted - mute the sound when playing a file;
• poster - the path to the image that will be shown during video loading or until the video starts showing. Optional, if not specified, the first frame of the video will be shown;
• preload - preload video. Possible values: auto , metadata , none ;
• src - path to the file with video content;
• width - player width in px or % .

Inside the video tag, you can insert the track tag to set various information about the video file. Using the attributes of the track tag is similar to using the attributes when applying this tag inside the audio tag.

When adding a video to a page, you should also take care of preparing the video files in the required formats. Various video converters can be used for this.

This makes it very easy to place a video on a page . Thanks to the new tag HTML5 made it possible to make video players highly functional, user-friendly and at the same time simple.