Home Web DevelopmentHTML Top 10 Image and Video Related HTML Tasks You Should Know

Top 10 Image and Video Related HTML Tasks You Should Know

The purpose of Images in an HTML webpage is to improve the design and appearance of a webpage. Images draw one’s attention and concentration in a web browser. Besides Images, we can embed videos in a web browser to make web pages look more live and entertaining. This increases the chances of one staying on a web page. Before we look at the top 10 image and video-related HTML tasks, let’s take a quick view of how to load the images and videos on a web browser.

HTML Images Syntax

The <img> tag is used to embed images in a web page. we use the src to define the path of the Image and alt to define the alternate text for the Image. This means that you should make sure the image actually stays in the same spot as the web page so that your visitors do not get a broken link. In case of a broken link or if the browser cannot find the image the alt text is displayed on the browser.

Example:

<body>
  <img src="brokenimagepath" alt="I'm missing. Please replace me!">
</body>

At times the image may not be on the same spot as the page hence we use ” / ” to navigate to the specific folder.

<body>
  <img src="https://www.codeunderscored.com/wp-content/uploads/2020/11/code_sample_image.png" alt="Image alternative text">
</body>

The Image tag is an example of an empty tag hence it has no closing tag.

HTML Video Syntax

The HTML <video> tag is used to display videos on a webpage. It has a controls attribute that adds video controls such as play, pause, and volume. To locate the image source we use <source src =”#” </source> and the type attribute to define the type of video example .mp4.

Example:

<body> 
<video>
  <source src="https://www.codeunderscored.com/wp-content/uploads/2020/11/MP4_sample.mp4" type="video/mp4">
</video>
</body>

Top 10 images and videos related HTML Tasks

Image/video height and width

They also have some similarities in terms of defining their property height and width. It determines the amount of space or the size occupied by an image or a video on a webpage. By this, I mean to describe an image height and width you will use. Notice the “Width” usage in the example below. The value is in pixels.

<body>
      <p>Setting image width and height</p>
      <img src = "https://www.codeunderscored.com/wp-content/uploads/2020/11/code_sample_image.png" alt = "Test Image" width = "150" height = "100"/>
   </body>

Similarly, to define a video height and width, we use:

<body>
      <p>Setting image width and height</p>
  <video>
      <source src="https://www.codeunderscored.com/wp-content/uploads/2020/11/MP4_sample.mp4" type="video/mp4" width = "450" height = "200"/>
  </video>
   </body>

Image Border

A border attribute is the thickness around an image. By default, an image will have a border. The thickness of the border can be changed in terms of pixels.

<body>
      <p>Image Border Demo</p>
      <img src = "https://www.codeunderscored.com/wp-content/uploads/2020/11/code_sample_image.png" alt = "Test Image" width = "450" height = "200" border = "3" />
   </body>

Image Alignment

This indicates the position of the image in relation to the page. By default, image justification is always left. You can change to the center or even right as needed.

<body>
      <p>Image Alignment Demo</p>
      <img src = "https://www.codeunderscored.com/wp-content/uploads/2020/11/code_sample_image.png" alt = "Test Image" width = "150" height = "100" align = "right" />
   </body>

Image Link

Involves using an Image as a URL. This is done by embedding the “a” tag. Look at the example below:

<body>
      <p>Image Link</p>
<a href ="https://www.codeunderscored.com/">
      <img src = "https://www.codeunderscored.com/wp-content/uploads/2020/11/code_sample_image.png" alt = "Test Image" width = "150" height = "100"/>
</a>
   </body>

Image Animation

To allow animation in Images, HTML uses .gif formats.

<body>
      <p>Image animation demo</p>
      <img src = "https://www.codeunderscored.com/wp-content/uploads/2020/11/Volcano_animated_sample.gif" alt = "Test Image" width = "450" height = "200"/>
  </body>

Image as Background

At times we can use an image as a background of a webpage. To do this, we add a style to hold the image background.

<body background = "https://www.codeunderscored.com/wp-content/uploads/2020/11/code_sample_image.png">
      <p>Image background </p>
  </body

Video Controls

These are video player control buttons. Video controls include; play, pause, and volume. To add these controls, we add an attribute control.

<body>
      <p>Video Controls Demo</p>
  <video controls  width = "450" height = "200">
      <source src="https://www.codeunderscored.com/wp-content/uploads/2020/11/MP4_sample.mp4" type="video/mp4" />
   </video>
   </body>

Video Poster

This attribute determines if an image will be displayed while the video is loading or when a user clicks on the play button.

<body>
      <p>Video poster</p>
  <video controls  poster ="images.gif" width = "450" height = "200">
      <source src="https://www.codeunderscored.com/wp-content/uploads/2020/11/MP4_sample.mp4" type="video/mp4" />
   </video>
   </body>

Video Preload

Preload determines how a video loads on page refresh. The three possible preload values are; none, metadata, and auto. Note that the preload attribute is ignored if autoplay is present, which we will be discussing next.

<body>
      <p>Video poster</p>
  <video controls  preload ="none" width = "450" height = "200">
      <source src="https://www.codeunderscored.com/wp-content/uploads/2020/11/MP4_sample.mp4" type="video/mp4" />
   </video>
   </body>

Video Auto-Play and Mute

Mute specifies whether the video’s audio will be heard or not. At the same time, autoplay determines if the video will be played automatically as soon as enough of the video has been buffered. It can either be set true or false.

<body>
      <p>Video Autoplay</p>
  <video controls  autoplay muted width = "450" height = "200">
      <source src="https://www.codeunderscored.com/wp-content/uploads/2020/11/MP4_sample.mp4" type="video/mp4" />
   </video>
   </body>

Conclusion

In this tutorial, we have learned about the top 10 images and video related Html tasks one should know. The video element was introduced in HTML5; hence we need to consider the browser compatibility appropriately as per the needs. Earlier, the webpages consisted of texts, which made them appear quite boring and uninteresting.

You may also like

Leave a Comment

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More