Several ways to embed video in HTML

A website on the Internet is a means of promoting a service or item. But what is a web resource without media content? Almost every site has videos that explain, attract, interest. Therefore, the owner of the web resource seeks to learn how to embed a video in HTML.

how to embed video in html

Ways to create sites

So, web sites are an opportunity to present information interactively. As you know, Internet resources consist of pages that are interconnected by hyperlinks. How can I create my own website?

  1. Use blogging technology. What does it mean? Register on the site and get a second level domain name. Due to this opportunity, the site owner becomes the administration of his resource and gets access to a special panel. With it, you can transform the "brainchild" to your liking.
  2. Take advantage of the numerous website builders developed, such as ucoz.ru, jimdo.com, setup.ru, Wix.com, A5.ru, Fo.ru, rusedu.net, etc.
  3. Develop an Internet resource through CMS, i.e. a content management system.
  4. Design your own “brainchild” design and recreate it using the HTML programming language.

However, today it’s almost impossible to create a fully functioning HTML site, but knowing this language, the layout of the web page can be adjusted and the structure changed in the finished templates.

Components of a Web Technology Part

Web technology is divided into the following basic components:

  1. Computer networks of various kinds interact with each other via TCP / IP.
  2. The Web has become one of the Internet applications that are designed to massively disseminate a variety of information.
  3. In web technology, data carriers are pages that contain media content (graphics, video, hyperlinks), so you need to know how to embed video in HTML.
  4. To transmit hypertext information, web technology uses the HTTP protocol.
  5. For the design and creation of web pages, the HTML hypertext markup language is used.
  6. To view resources on the Internet, you need to use a browser.

Method number 1. Insert media content (video) using HTML5 tags

There are several ways to embed video content on a web page. There are three options: insertion via HTML, player or YouTube. First you need to create a regular HTML5 file that will contain page styles and several subheadings. After preparation, you can choose one of the methods and enjoy the result.

  1. Find the third heading and write the code directly below it:
    embed video using html 5
  2. Open the page in a browser and make sure the video appears.
  3. Be sure to correctly register the path to the video.
  4. To insert video in HTML was literate, you need to mark up the video control panel. The controls parameter is responsible for this.

It should be noted that this method is not remarkable for everyone. For example, in the Opera browser, videos placed in this way will not play. To avoid this situation, you need to convert the video to Ogg Theora type, change the code.

You can convert the file using the online-convert.com service. Then you need to change the code to this:

embed video in html

If the old browser does not understand some tag, then the code may look like this.

embed video using html 5

Method number 2. How to insert a video in HTML using the player

Video content can be inserted into HTML without any premature upload to the video service. So, you can use the player’s script to put the desired video on a site with the extension .mp4 or .flv. First of all, you need to choose the video itself. Then you need to choose one of the many free players. Alternatively, you can use Flowplayer.

  1. You need to download the files of the specified player to the local computer.
  2. Unzip them to a specific folder on the created site.
  3. Open the HTML file and connect the player javascript file to the prepared file. To do this, you need to write a special code inside the HEAD tag. Important : correctly specify the path to the folder!
    insert video through player
  4. You need to place the player in an HTML file. Here you need to correctly register the path to the files. It also indicates the settings that prohibit the video from starting automatically. If you want the video to start automatically, after the path to the file, remove the comma, close the bracket (round) and put a semicolon.
    add video to html

This method is quite simple and straightforward to add video to HTML. By the way, many web programmers use this option.

Method number 3. Insert a video into HTML from YouTube

After creating the HTML5 prep file, you can begin to embed the video content from the YouTube service.

  1. First you need to select the video that will be on the page. It must be stored on the local computer.
  2. You need to go to youtube.com. You should create your account or log into an existing one.
  3. After entering your YouTube page, you need to click the "Add Video" button, after which a window will appear asking you to select a file to upload. The selected video will load after a while.
  4. You can follow the link of the downloaded file, which is located at the top.
  5. To get the code for inserting the video, you need to click "Share" and "HTML-code." The page will give the program code that is needed. Here you can specify such parameters as: privacy mode, video size, the ability to show similar records.
  6. After setting the parameters, the code is copied and pasted into the prepared HTML file.
  7. All is ready. Now it’s clear how to embed a video in HTML from the YouTube service.

embed video in html from YouTube

So, several ways to embed videos in HTML have been considered. Which option to choose is up to the web-programmer or site owner.

Source: https://habr.com/ru/post/C31819/


All Articles