HTML as a structure for Webpages has many functions and features. An essential element that developers need in building their Portfolio is HTML Media. With the HTML Media feature, developers can add their stacks' video files to their Portfolio.
In this session, I'll discuss What HTML Media is and how to add it.

What is HTML Media?

Media are files and data comprising material viewable by humans, but usually not plain text; or audiovisual material. It can be in the form of images, music, sound, videos, records, films, animations, and more.

Creating HTML Media on a webpage

As mentioned above, Images, Video(records, films, animation), and Audio (Music, sound) are examples of media. In my previous articles, I had written about How to add Images to HTML.

How to Add Video files?

Adding video files to HTML takes the following simple steps:

• ONE=> Save the Video files to the same Folder the .html file is stored. Note the extension of the video file (.mp4, .mpeg, .ogg, .avi, .webm, etc).
• TWO=> Open the .html file on your IDE. Type in <video width="value" height=''value'' controls> <source src=''video file name.extension'' type=''video/extension''> Description Text </video>

• THREE=> Run the Code. Syntax:

       <video width="370" height ="230" controls>
    <source src="I-Am-Groot-S01E03-STAGATV-COM.mp4"             
    type="video/mp4">My First Video</video>    
  

  
  Output:

  NOTE: (1.) type="video/mp4" defines the type of file it is, <source> tag is used to fetch the media file from its src (Source file).
  (2.) controls add controls to the video, enabling users to Pause, play, and volume the video on the webpage.

  • autoplay can also be used as it plays the video automatically on viewing the webpage.
  • To autoplay and add controls, the autoplay attribute is to be placed before the ` controls attribute in the syntax.
  • To mute the video, you add the muted after both the autoplay and controls.
  • Only MP4, WebM, and Ogg video are supported by the HTML standard. So, run the code on browsers if the IDE doesn't run it.
  • Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

How to Add Audio files?

Adding Audio files to HTML isn't so different from "Adding video files to HTML," but a tiny little difference. The simple steps to adding an audio file are as follows:

• ONE=> Save the Audio files to the same Folder the .html file is stored. Note the extension of the audio file (.mp3, .wav, .ogg, .midi, .wma, etc).
  
• TWO=> Open the .html file on your IDE. Type in <audio controls> <source src=''audio file name.extension'' type=''audio/extension''> Description Text </audio>
• THREE=> Run the Code.
  The Syntax:

    <audio controls>
  <source src="Spiderman Theme Song Lyrics_360p-898_320kbps.mp3" type="audio/mp3">
    My First Audio</audio>  
  

  The Output:

  NOTE: (1.) type="audio/mp3" defines the type of file it is. (2.) controls add controls to the audio, enabling users to Pause, play, and volume the video on the webpage.

  • autoplay can also be used as it plays the audio automatically on viewing the webpage.
  • Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
  • To mute the audio, you add the muted after both the autoplay and controls.
  • To autoplay and add controls, the autoplay can be placed before the ` controls and vice versa in the syntax.
  • MP3, Wav, and Ogg audio are the only supported audio type by the HTML standard. So, run the code on various browsers if the IDE doesn't run it.

GENERAL NOTE=> Both the<video> and the <audio> elements are used to play Video files and Audio files.

Some keywords: IDE (Integrated Development Environment), Mpeg (Moving Pictures Expert Group), AVI (Audio Video Interleave), MIDI (Musical Instrument Digital Interface), WMA (Windows Media Audio).

Another thing about being a Developer is that "Learning doesn't stop," for you can't know everything. Every day, every moment you search online, you find things that seem new to you. YOU LEARN!
Get more on HTML at Sololearn. Follow my blog @ Cyph or Mr. Niceguy for more articles. Thanks as you do so🥰