Sign in Registration
ArticlesDownloadServicesAudioContacts
ruen

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

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 .

html5-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:

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

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

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.

Comments (0)
For commenting sign in or register.

Latest articles

Popular sections

Communication

Login to the web version
Android app:
Available on Google Play

Share this

Subscribe to