HTML5 మల్టీమీడియా: ఆడియో (audio), వీడియో (video), ట్రాక్స్ (track) & ఐఫ్రేమ్స్ (iframe)

• ఫ్లాష్ మరణం & నేటివ్ మల్టీమీడియా: ఎటువంటి ప్లగిన్ లేకుండా బ్రౌజర్‌లో మీడియా ప్లే అయ్యే అద్భుత సూత్రం.
• <audio> ఎలిమెంట్ అనాటమీ: controls, autoplay, loop, muted, మరియు preload ఆట్రిబ్యూట్లు.
• మల్టిపుల్ సోర్స్‌లు (<source> ట్యాగ్): వివిధ బ్రౌజర్ల కోడెక్ మద్దతు కోసం MP3, OGG, WAV ఫాల్‌బ్యాక్స్.
• <video> ఎలిమెంట్ నిర్మాణం: poster థంబ్‌నెయిల్, width, height, మరియు playsinline ఆప్టిమైజేషన్లు.
• బ్రౌజర్ Autoplay పాలసీ: శబ్దంతో కూడిన ఆటోప్లేని బ్రౌజర్లు ఎందుకు బ్లాక్ చేస్తాయి? "Muted Autoplay" ట్రిక్.
• <track> & WebVTT సబ్‌టైటిల్స్: వికలాంగుల కోసం మరియు బహుళ భాషల్లో సబ్‌టైటిల్స్ (.vtt ఫైల్స్) జోడించడం.
• <iframe> ఇన్-లైన్ ఫ్రేమ్స్: గూగుల్ మ్యాప్స్ మరియు యూట్యూబ్ వీడియోలను మన వెబ్‌సైట్‌లో ఎంబెడ్ చేయడం.
• ఐఫ్రేమ్ భద్రత (sandbox & loading="lazy"): క్లిక్‌జాకింగ్ (Clickjacking) దాడుల నుండి సైట్‌ను కాపాడే సెక్యూరిటీ రూల్స్.

వెబ్‌సైట్‌లో ఆడియో లేదా వీడియోను పొందుపరిచే ముందు — బ్రౌజర్లు ఏయే ఫార్మాట్లను సపోర్ట్ చేస్తాయో తెలుసుకోవడం చాలా అవసరం. ఒక ఫార్మాట్ క్రోమ్‌లో ప్లే అయితే, అదే ఫార్మాట్ పాత సఫారీలో లేదా ఫైర్‌ఫాక్స్‌లో పనిచేయకపోవచ్చు!

HTML5 లో ఒక ఆడియో ట్రాక్ (పాట, పాడ్‌కాస్ట్, లేదా సౌండ్ ఎఫెక్ట్) ను వెబ్‌పేజీలో చేర్చడానికి <audio> ట్యాగ్‌ను ఉపయోగిస్తాం.

కీలకమైన ఆట్రిబ్యూట్లు:

• controls: ఇది చాలా ముఖ్యం! ఇది ఇవ్వకపోతే ప్లే, పాజ్, వాల్యూమ్, మరియు టైమ్‌లైన్ స్లైడర్ బటన్లు స్క్రీన్ మీద కనిపించనే కనిపించవు (ఆడియో కంటికి కనిపించకుండా దాక్కుంటుంది).
• autoplay: పేజీ లోడ్ అవ్వగానే ఆటోమేటిక్‌గా పాటను ప్లే చేస్తుంది (గమనిక: యూజర్ క్లిక్ చేయకుండా సౌండ్ ప్లే అవ్వకుండా ఆధునిక బ్రౌజర్లు అడ్డుకుంటాయి).
• loop: ఆడియో పూర్తయిన తర్వాత మళ్ళీ మొదటి నుండి రిపీట్‌గా ప్లే అవుతూనే ఉంటుంది.
• muted: పాట ప్రారంభంలోనే నిశ్శబ్దంగా (Mute) ప్లే అవుతుంది.
• preload: పేజీ వేగాన్ని ఆప్టిమైజ్ చేయడానికి వాడే వ్యూహం:
  • none: యూజర్ ప్లే బటన్ నొక్కే వరకు ఆడియో ఫైల్‌ను డౌన్‌లోడ్ చేయదు (మొబైల్ డేటా ఆదా అవుతుంది!).
  • metadata: కేవలం పాట నిడివి (Duration) మరియు సైజు మాత్రమే డౌన్‌లోడ్ చేస్తుంది. (సిఫార్సు చేయబడినది)
  • auto: పేజీ ఓపెన్ కాగానే పూర్తి పాటను బఫర్ చేస్తుంది.

<!-- ఆధునిక బ్రౌజర్ ఆడియో ప్లేయర్ -->
<audio controls preload="metadata" style="width: 100%; max-width: 450px;">
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  మీ బ్రౌజర్ HTML5 ఆడియో ఎలిమెంట్‌ను సపోర్ట్ చేయడం లేదు.
</audio>

ప్రపంచవ్యాప్తంగా యూజర్లు విభిన్న బ్రౌజర్లు (Chrome, Safari, Firefox, Edge) మరియు విభిన్న ఆపరేటింగ్ సిస్టమ్‌లు (Android, iOS, Windows, Mac) ఉపయోగిస్తారు. అందరి మొబైల్స్‌లోనూ మీ పాట లేదా వీడియో ఎటువంటి లోపం లేకుండా ప్లే అవ్వాలంటే — ఒకే మీడియా ఫైల్‌ను రెండు విభిన్న ఫార్మాట్లలో <source> ట్యాగ్ ద్వారా అందించాలి:

<audio controls>
  <!-- 1st ఛాయిస్: ఆధునిక ఫార్మాట్ -->
  <source src="audio/podcast.ogg" type="audio/ogg">
  
  <!-- 2nd ఛాయిస్: గ్లోబల్ ఫాల్‌బ్యాక్ -->
  <source src="audio/podcast.mp3" type="audio/mpeg">

  <!-- బ్రౌజర్ అసలు ఆడియోనే సపోర్ట్ చేయకపోతే కనిపించే మెసేజ్ -->
  <p>దురదృష్టవశాత్తూ మీ బ్రౌజర్ HTML5 ఆడియోను సపోర్ట్ చేయడం లేదు. దయచేసి <a href="audio/podcast.mp3">ఈ లింక్ ద్వారా పాటను డౌన్‌లోడ్ చేసుకోండి</a>.</p>
</audio>

💡 బ్రౌజర్ పైనుండి క్రిందికి స్కాన్ చేస్తుంది. తనకు మొదట సపోర్ట్ ఉన్న ఫార్మాట్ దొరకగానే దానిని ప్లే చేసి, క్రింద ఉన్న మిగతా సోర్స్‌లను విస్మరిస్తుంది.

<video> ఎలిమెంట్ వెబ్‌పేజీలో కదిలే చిత్రాలను (వీడియోలను) ప్రదర్శిస్తుంది. ఆడియోకు ఉండే అన్ని ఆట్రిబ్యూట్లతో పాటు వీడియోకు మరికొన్ని శక్తివంతమైన విజువల్ ఆట్రిబ్యూట్లు ఉంటాయి:

• poster="thumbnail.jpg": యూజర్ ప్లే బటన్ నొక్కకముందు లేదా వీడియో లోడ్ అయ్యేవరకు స్క్రీన్ మీద కనిపించే కవర్ ఫోటో (YouTube Thumbnail లాంటిది). ఇది ఇవ్వకపోతే వీడియో మొదటి ఫ్రేమ్ లేదా నల్లటి ఖాళీ డబ్బా కనిపిస్తుంది.
• width మరియు height: వీడియో పరిమాణం. లేఅవుట్ జంపింగ్ (CLS) నివారించడానికి వీటిని ముందే పేర్కొనడం తప్పనిసరి.
• playsinline: ఐఫోన్ (iOS Safari) యూజర్లు వీడియో ప్లే చేసినప్పుడు అది బలవంతంగా స్క్రీన్ మొత్తం ఫుల్‌స్క్రీన్ అయిపోకుండా, వెబ్‌పేజీ లోపలే నడవడానికి ఇది సహాయపడుతుంది.

<video width="640" height="360" 
       controls 
       poster="https://images.unsplash.com/photo-1536240478700-b869070f9279?w=640" 
       preload="metadata" 
       playsinline 
       style="max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.15);">
  <!-- ఆధునిక లైట్-వెయిట్ WebM -->
  <source src="https://www.w3schools.com/html/mov_bbb.webm" type="video/webm">
  <!-- ప్రామాణిక MP4 -->
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  మీ బ్రౌజర్ HTML5 వీడియోను సపోర్ట్ చేయదు.
</video>

వెబ్‌సైట్ ఓపెన్ చేయగానే సడన్‌గా పెద్ద శబ్దంతో పాట లేదా ప్రకటన ప్లే అయితే యూజర్లకు ఎంత చిరాకు కలుగుతుందో గూగుల్ క్రోమ్ మరియు ఆపిల్ సఫారీ గ్రహించాయి. అందుకే 2018 నుండి బ్రౌజర్లు సౌండ్‌తో కూడిన ఆటోప్లేని (Unmuted Autoplay) కఠినంగా నిషేధించాయి!

<!-- బ్యాక్‌గ్రౌండ్ వీడియో బ్యానర్: సైలెంట్, లూప్, ఆటోప్లే -->
<video autoplay muted loop playsinline style="width: 100%; height: 300px; object-fit: cover;">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

వినే శక్తి లోపించిన వ్యక్తులకు (Deaf and Hard of Hearing) లేదా బస్సు/రైలులో ప్రయాణిస్తూ సౌండ్ లేకుండా వీడియో చూసేవారికి సబ్‌టైటిల్స్ (Subtitles / Closed Captions) అత్యవసరం. దీనికోసం HTML5 లో <track> ఎలిమెంట్‌ను ఉపయోగిస్తాం.

సబ్‌టైటిల్స్ సమాచారాన్ని WebVTT (.vtt) అనే ప్రత్యేక టెక్స్ట్ ఫైల్ రూపంలో రాయాలి:

<video controls width="600">
  <source src="movie.mp4" type="video/mp4">
  
  <!-- తెలుగు సబ్‌టైటిల్స్ (డిఫాల్ట్‌గా ఆన్) -->
  <track src="subtitles-te.vtt" kind="subtitles" srclang="te" label="తెలుగు" default>
  
  <!-- ఇంగ్లీష్ సబ్‌టైటిల్స్ -->
  <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
</video>

<iframe> (Inline Frame) అనేది మీ వెబ్‌పేజీ లోపల మరొక పూర్తి స్థాయి HTML వెబ్‌పేజీని ఒక చిన్న విండో లాగా అమర్చడానికి (Embed చేయడానికి) ఉపయోగించే ట్యాగ్.

వాస్తవ ప్రపంచంలో <iframe> ఎక్కడెక్కడ వాడతారు?

• యూట్యూబ్ (YouTube) లేదా విమియో వీడియోలను వెబ్‌సైట్‌లో చూపించడానికి.
• గూగుల్ మ్యాప్స్ (Google Maps) లొకేషన్‌ను కాంటాక్ట్ పేజీలో పొందుపరచడానికి.
• పేమెంట్ గేట్‌వేలు (Razorpay, Stripe) లేదా సర్వే ఫారాలు (Google Forms).
• ట్విట్టర్/ఎక్స్ ట్వీట్లు లేదా ఇన్‌స్టాగ్రామ్ పోస్ట్‌లను ఎంబెడ్ చేయడానికి.

<!-- యూట్యూబ్ రెస్పాన్సివ్ ఐఫ్రేమ్ -->
<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
        title="యూట్యూబ్ వీడియో ప్లేయర్" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
        referrerpolicy="strict-origin-when-cross-origin" 
        allowfullscreen 
        style="max-width: 100%; border-radius: 8px;">
</iframe>

ఐఫ్రేమ్స్ వాడేటప్పుడు భద్రత చాలా సున్నితమైన అంశం. ఒకవేళ మీరు అనుమానాస్పద లేదా హానికరమైన థర్డ్-పార్టీ వెబ్‌సైట్‌ను మీ పేజీలో ఐఫ్రేమ్ ద్వారా చూపిస్తే, ఆ సైట్ మాల్వేర్ రన్ చేయడం లేదా మీ యూజర్ పాస్‌వర్డ్‌లను దొంగిలించడానికి ప్రయత్నించవచ్చు (Clickjacking / XSS Attacks).

దీనిని అరికట్టడానికి HTML5 లో sandbox ఆట్రిబ్యూట్ వచ్చింది:

loading="lazy" తో పేజీ స్పీడ్ పెంచడం:

గూగుల్ మ్యాప్స్ లేదా యూట్యూబ్ ఐఫ్రేమ్స్ చాలా హెవీగా ఉంటాయి (దాదాపు 1MB డేటా). పేజీ దిగువన ఉండే ఐఫ్రేమ్‌కు loading="lazy" ఇస్తే — యూజర్ పేజీ కిందికి స్క్రోల్ చేసేవరకు ఆ ఐఫ్రేమ్ లోడ్ అవ్వదు. దీనివల్ల వెబ్‌సైట్ రాకెట్ లాగా ఓపెన్ అవుతుంది!

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3806.3!2d78.38!3d17.44" 
        width="600" height="400" 
        style="border:0; width:100%; max-width:600px; border-radius:8px;" 
        loading="lazy" 
        referrerpolicy="no-referrer-when-downgrade" 
        title="హైదరాబాద్ ఆఫీస్ లొకేషన్">
</iframe>

ఒక ఆధునిక వెబ్ మల్టీమీడియా డాక్యుమెంట్ ఏయే అంశాలను ఏ క్రమంలో కలిగి ఉండాలో క్రింది డయాగ్రమ్ స్పష్టం చేస్తుంది:

ఈ అధ్యాయంలో మీరు నేర్చుకున్న విషయాలను స్వయంగా పరీక్షించుకోండి. ప్రతి ప్రశ్నను చదివి సమాధానం ఆలోచించిన తర్వాత "సమాధానం చూడండి" పై క్లిక్ చేయండి: