Chapter 21: HTML Audio and Video: മീഡിയ ഫയലുകൾ എളുപ്പത്തിൽ ചേർക്കുക (Embedding Audio and Video in HTML)

HTML Audio and Video എന്താണ്?

HTML-ൽ ഓഡിയോയും വീഡിയോയും വെബ്ബ് പേജുകളിൽ പ്രദർശിപ്പിക്കാനുള്ള ടാഗുകളാണ് <audio> & <video>. HTML5 ഉപയോഗിച്ച് ഈ ടാഗുകൾ മുഖ്യമായ ഫീച്ചറുകളായി ഉൾപ്പെടുത്തിയിരിക്കുന്നു, സെർവറിൽ നിന്ന് പ്ലഗിനുകൾ ആവശ്യമില്ലാതെ നെറ്റിവ് പ്ലേബാക്ക് നൽകാൻ ഇതിന് കഴിയും.

HTML <audio> ടാഗ്:

HTML <audio> ടാഗ് വെബ്ബ് പേജുകളിൽ ഓഡിയോ ഫയലുകൾ പ്ളേ ചെയ്യാൻ ഉപയോഗിക്കുന്നു. ഇത് ഓഡിയോ ഫയലുകളുമായി ബന്ധമുള്ള ഓപ്ഷനുകൾ നൽകാനും പല ഫോർമാറ്റുകളും പിന്തുണയ്ക്കാനും കഴിയും.

HTML Audio Tag Structure:

<audio controls>
  <source src="audiofile.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Example:

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  നിങ്ങളുടെ ബ്രൗസർ ഓഡിയോ പ്രോത്സാഹിപ്പിക്കുന്നില്ല.
</audio>

Audio Tag Attributes:

1. controls: പ്ലേയ്ബാക്ക് ഓപ്ഷനുകൾ (Play, Pause, Volume) കാണിക്കാനാണ് ഉപയോഗിക്കുന്നത്.htmlCopy code<audio controls> <source src="song.mp3" type="audio/mpeg"> </audio>
2. autoplay: ഓഡിയോ ഫയൽ പേജ് ലോഡ് ചെയ്യുമ്പോൾ ഓട്ടോമാറ്റിക് ആയി പ്ലേ ചെയ്യാൻ.htmlCopy code<audio controls autoplay> <source src="song.mp3" type="audio/mpeg"> </audio>
3. loop: ഓഡിയോ ഫയൽ അവസാനിച്ചപ്പോൾ വീണ്ടും ആരംഭിക്കാൻ.htmlCopy code<audio controls loop> <source src="song.mp3" type="audio/mpeg"> </audio>
4. muted: ഓഡിയോ മ്യൂട്ട് ചെയ്ത് പ്ലേ ചെയ്യാൻ.htmlCopy code<audio controls muted> <source src="song.mp3" type="audio/mpeg"> </audio>

HTML <video> ടാഗ്:

HTML <video> ടാഗ് വെബ്ബ് പേജുകളിൽ വീഡിയോ ഫയലുകൾ പ്രദർശിപ്പിക്കാൻ ഉപയോഗിക്കുന്നു. ഓഡിയോയുടേയും വീഡിയോയുടേയും ഈ നെറ്റിവ് സപ്പോർട്ട് HTML5-ൽ പ്രത്യേക ശ്രദ്ധ നേടി.

HTML Video Tag Structure:

<video width="600" controls>
  <source src="videofile.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

Example:

<video width="400" controls>
  <source src="movie.mp4" type="video/mp4">
  നിങ്ങളുടെ ബ്രൗസർ വീഡിയോ പ്രദർശിപ്പിക്കുന്നില്ല.
</video>

Video Tag Attributes:

1. controls: വീഡിയോ പ്ലേ ചെയ്യുന്നതിനുള്ള ബട്ടണുകൾ കാണിക്കാൻ.htmlCopy code<video width="600" controls> <source src="movie.mp4" type="video/mp4"> </video>
2. autoplay: പേജ് ലോഡായ ഉടനെ വീഡിയോ ഓട്ടോമാറ്റിക് ആയി പ്ലേ ചെയ്യുന്നു.htmlCopy code<video width="600" controls autoplay> <source src="movie.mp4" type="video/mp4"> </video>
3. loop: വീഡിയോ ഫയൽ അവസാനിച്ചാൽ വീണ്ടും പ്ലേ ചെയ്യാൻ.htmlCopy code<video width="600" controls loop> <source src="movie.mp4" type="video/mp4"> </video>
4. poster: വീഡിയോ ലോഡ് ചെയ്യുന്നതിനു മുൻപായി പ്രദർശിപ്പിക്കുന്ന ഒരു ചിത്രത്തിനെ വേണ്ടി posterആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു.htmlCopy code<video width="600" controls poster="thumbnail.jpg"> <source src="movie.mp4" type="video/mp4"> </video>

Supported Audio and Video Formats:

1. Audio Formats:
   • MP3 (audio/mpeg)
   • Ogg (audio/ogg)
   • WAV (audio/wav)
2. Video Formats:
   • MP4 (video/mp4)
   • WebM (video/webm)
   • Ogg (video/ogg)

Fallback Content:

എല്ലാ ബ്രൗസറുകളും ഓഡിയോയും വീഡിയോയും പിന്തുണയ്ക്കുന്നില്ലെങ്കിൽ, fallback content ഉപയോഗിക്കാം.

<video width="600" controls>
  <source src="movie.mp4" type="video/mp4">
  നിങ്ങളുടെ ബ്രൗസർ വീഡിയോ പ്രദർശിപ്പിക്കുന്നില്ല.
</video>

Embedding YouTube Videos in HTML:

HTML iframe ടാഗ് ഉപയോഗിച്ച് YouTube വീഡിയോ ഇമ്പെഡ് ചെയ്യാനാകും.

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

Audio and Video Accessibility:

• captions/subtitles: ഉപയോക്താക്കൾക്ക് കൂടുതൽ അനുയോജ്യമായതാക്കി, വീഡിയോ ഫയലുകൾക്കായി ക്യാപ്ഷനുകളും സബ്റ്റൈറ്റിലുകളും ഉൾപ്പെടുത്താം.htmlCopy code<track kind="captions" src="subtitles_en.vtt" srclang="en" label="English">

JavaScript Interaction with Audio and Video:

JavaScript ഉപയോഗിച്ച് ഓഡിയോയും വീഡിയോയും നിയന്ത്രിക്കാനാകും, ഉദാഹരണത്തിന്, play, pause, muted എന്നിവ ഓട്ടോമാറ്റിക് ആക്കി മാറ്റുക.

<script>
  var video = document.getElementById("myVideo");
  video.play(); // Play the video
  video.pause(); // Pause the video
</script>

CSS Styling for Audio and Video:

CSS ഉപയോഗിച്ച് ഓഡിയോ, വീഡിയോ പ്ലെയറുകൾക്ക് രൂപഭംഗി നൽകാൻ കഴിയും, ഉദാഹരണത്തിന്:

video {
  border: 2px solid black;
  border-radius: 10px;
}

---

സങ്കലനം:

HTML5 <audio> & <video> ടാഗുകൾ ഉപയോഗിച്ച് വെബ്ബ് പേജുകളിൽ ഓഡിയോയും വീഡിയോയും ഉൾപ്പെടുത്താൻ എളുപ്പമാണ്. ഫോർമാറ്റ് സപ്പോർട്ട്, JavaScript ഇന്ററാക്ഷൻ, CSS Styling എന്നിവ ഉപയോഗിച്ച് ആ വാക്കുകൾ ഇന്ററാക്ടീവ് ആക്കാനും വ്യക്തമായ രീതിയിൽ പ്രദർശിപ്പിക്കാനുമാവും.