How to embed video in HTML4 min read

Embed Video in HTML

Inserting a video into your website can be done in a variety of ways. The video was inserted into an HTML document using the <embed>, <frame>, and <object> tags. Let’s have a look at how to use the <video> and <iframe> tags.

Adding Video into Web Page

  • HTML5 includes the <video> tag. A video could only be played in a browser with a plug-in before HTML5 was released. The HTML5 <video> element provides how to embed a video in a web page in a standard way.
  • To put it another way, the video is recognized by including a video URL in the source attribute. It can be used to embed videos that have been downloaded from a computer or that have been uploaded on a third-party website.
  • All we need to do in an HTML document for the most basic use is add the video URL to the element by using the source element to identify the video URL and adding the controls attribute to allow website visitors to control video choices.

Video tag attributes

  • src: The src attribute specifies the URL where the video content is stored.
  • autoplay: This indicates that the video will begin playing as soon as it is available.
  • type: which specifies the file’s format,
  • loop: This states that after the video is done, it will start anew.
  • controls: No visual element will appear to control playing of the material unless controls are specified.
  • poster: which chooses an image to serve as the video’s poster until playback begins
  • preload: This indicates how the author believes the video should be loaded when the page is loaded.
FormatFileDescription

AVI

.avi

The AVI (Audio Video Interleave) format was developed by Microsoft. The AVI format is supported by most popular web browsers. It is a very common format on the Internet, but not always possible to play on non-Windows computers.

Flash

.swf .fly

The Flash (Shockwave) format was developed by Macromedia. The Shockwave format requires an extra component to play. But this component comes preinstalled with web browsers like Firefox and Internet Explorer.

Mpeg-4

.mp4

Mpeg-4 (with H264 video compression) is the new format for the internet. In fact, YouTube recommends using MP4. YouTube accepts multiple formats, and then converts them all to .flv or .mp4 for distribution. More and more online video publishers are moving to MP4 as the internet sharing format for both Flash players and HTML5.

RealVideo

 .rm

The Real Video format was developed for the Internet by Real Media. The format allows streaming of video (On-line video, Internet TV) with low bandwidths. Because of the low bandwidth priority, quality is often reduced. 

There are various format of video file that includes,

Demonstration of adding Video Page

Embedding a video in HTML using <video> tag

  • The <video> element is used to include video content, such as a movie clip or other video streams, in a document.
  • One or more tags with distinct video sources are included in the
  • Only browsers that do not support the
  • In HTML, three video formats are supported: MP4, WebM, and OGG
<html>
  
  <head>
    <title>Hiberstack Is An Open Community For Anyone That Codes</title>
  </head>
  
  <body>
    
    <video width="320" height="240" controls>
      <source src="https://fb.watch/8VosQF4KgM/" type=video/.mp4>
    </video>
    
    <p> Our mission is to create such a community where the new learners finds answers 
      to their queries and thus are encouraged in learning the technology and where the 
      technologists can share the solutions to help the fellow developers </p>
    
  </body>
  
</html>

Adding video in web page using<iframe> Tag

Use the <iframe> element to embed a video in an HTML page. The video URL was supplied in the source property. Set the width and height of the video suitably for the video player’s parameters.

<html>
  
   <head>
      <title>HTML Video embed</title>
   </head>
  
   <body>
      <p> Hiberstack </p>
      <br />
      <iframe width="560" height="315" src="https://fb.watch/8VosQF4KgM/" frameborder="0" allowfullscreen></iframe>
      </iframe>
   </body>

</html>

Share:

Leave a Reply