How to Insert Video in HTML from Folder ?

By Ranjit January 19, 2023 Script 0 Comments

Table of Contents

How to Insert Video in HTML from Folder ?

Inserting a video in HTML is a simple process that can be accomplished using the <video> tag. The <video> tag is used to embed videos in an HTML document, and it requires two important attributes: src and controls.

The src attribute is used to specify the source of the video, which is the file path. It’s important to use the correct file format that is supported by the browser, such as mp4, ogg, or webm.

For example, if you have a video file called “myvideo.mp4” in a folder called “videos” on your website, the src attribute should be set to “videos/myvideo.mp4”.

Copy code ↠ <video src="videos/myvideo.mp4" controls></video>

The controls attribute is used to enable the video player’s controls, such as play, pause, and volume. Without the controls attribute, the video will not have any controls and will not be able to play.

It’s also possible to specify the width and height of the video using the width and height attributes, for example:

Copy code ↠ <video src="videos/myvideo.mp4" controls width="640" height="480"></video>

Additionally, it’s possible to set a poster image, which will be displayed before the video starts playing. This can be done by using the poster attribute.

Copy code↠ <video src="videos/myvideo.mp4" controls width="640" height="480" poster="images/poster.jpg"></video>

Insert Video in HTML from Folder

It is also possible to use the <source> tag in conjunction with the <video> tag to specify multiple sources for the video, this is useful in case you want to provide multiple video formats to increase compatibility across different browser.

Copy code↠ <video controls>
    <source src="videos/myvideo.mp4" type="video/mp4">
    <source src="videos/myvideo.webm" type="video/webm">
    <source src="videos/myvideo.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

Overall, inserting a video in HTML is a simple process that can be accomplished using the <video> tag. By specifying the correct file path and using the controls attribute, you can easily embed videos in your HTML documents.

It is also important to note that when inserting videos in HTML, you should always make sure that the videos are hosted on a reliable and fast server. Slow loading times can be a major issue for users, and it can also cause problems with the playback of the video.

Also, when inserting a video from a folder, it is important to make sure that the folder and file have the appropriate permissions to be accessed by the web server. In some cases, you may need to adjust the file or folder permissions to allow the web server to read the video file.

Another important aspect to keep in mind is that some browsers may have different compatibility with different video formats, using multiple formats, as mentioned before, can help to increase compatibility across different browsers.

It’s also important to consider accessibility when inserting videos in HTML. For example, you should always include captions or subtitles for your videos, to help viewers who are hard of hearing or non-native speakers of the language used in the video. Additionally, you should consider providing a transcript of the video for viewers who may have difficulty watching the video.

Lastly, it’s also important to consider the user’s data usage. Videos can consume a lot of data, especially if they are long or have high resolution. It’s a good practice to provide a way for the users to choose the video quality they want to watch, or to show them a video preview before they start the video.

Conclusion

In summary, inserting a video in HTML is a simple process, but it’s important to keep in mind the different aspects such as accessibility, compatibility, and user experience. By following best practices and considering these aspects, you can ensure that your videos are accessible and enjoyable for all users.