Cover Image for How to add Video in Html
82 views

How to add Video in Html

To add a video in HTML, you can use the <video> element. Here’s an example of how to do it:

HTML<span role="button" tabindex="0" data-code="<video src="video.mp4" controls> Your browser does not support the video tag.
<video src="video.mp4" controls>
  Your browser does not support the video tag.
</video>

In the above example, the src attribute specifies the source URL of the video file (video.mp4 in this case). The controls attribute adds playback controls (play/pause, volume control, etc.) to the video player.

You can also specify additional attributes and options for the <video> element:

  • autoplay: Automatically starts playing the video when the page loads.
  • loop: Repeats the video playback.
  • muted: Starts the video with the audio muted.
  • poster: Specifies an image to display as a placeholder before the video is played.

Here’s an example with some additional attributes:

HTML<span role="button" tabindex="0" data-code="<video src="video.mp4" controls autoplay loop muted poster="poster.jpg"> Your browser does not support the video tag.
<video src="video.mp4" controls autoplay loop muted poster="poster.jpg">
  Your browser does not support the video tag.
</video>

Make sure to replace "video.mp4" with the actual path or URL to your video file, and "poster.jpg" with the path or URL to your poster image if desired. Also, provide a fallback message or content between the opening and closing <video> tags, which will be displayed if the browser doesn’t support the <video> element.

Note that different video formats may be required for cross-browser compatibility. You can provide multiple <source> elements within the <video> element to specify different video formats. For example:

HTML<span role="button" tabindex="0" data-code="<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support the video tag.
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

In this example, the browser will try to play the video.mp4 file first, and if it’s not supported, it will try the video.webm file. The browser will use the first compatible video format it can play.

Remember to replace "video.mp4" and "video.webm" with the actual paths or URLs to your video files, and provide suitable video formats for broader browser compatibility.

YOU MAY ALSO LIKE...

The Tech Thunder

The Tech Thunder

The Tech Thunder


COMMENTS