కోసం తన బ్లాగులలో మొదటిది పిసి ప్రో , అంతర్జాల వృద్ధికారుడు ఇయాన్ డెవ్లిన్ HTML5 తో మీ వెబ్‌సైట్‌లో వీడియోను ఎలా పొందుపరచాలో తెలుపుతుంది
మీ అసమ్మతి సర్వర్‌కు బోట్‌ను ఎలా జోడించాలి
HTML5 యొక్క అతిపెద్ద మరియు ఎక్కువగా మాట్లాడే లక్షణం పొందుపరిచిన వీడియో. ప్రస్తుతం, మీ వెబ్‌సైట్‌లో వీడియో కంటెంట్‌ను జోడించే ఏకైక పద్ధతి ఫ్లాష్, క్విక్‌టైమ్ లేదా రియల్ ప్లేయర్ వంటి మూడవ పార్టీ ప్లగ్ఇన్‌తో మాత్రమే. HTML5 మరియు వీడియో ఎలిమెంట్ యొక్క డాన్ తో, ఇదంతా మారుతుంది, వీడియో మద్దతు వెబ్ బ్రౌజర్ చేత నిర్వహించబడుతుంది, ఏదైనా మూడవ పార్టీ మద్దతు అవసరం లేకుండా చేస్తుంది.
అనేక వెబ్ బ్రౌజర్‌లు ఇప్పటికే HTML5 కోసం మద్దతును అందిస్తున్నాయి. ప్లగ్ఇన్ లేని వీడియోను మీరు మీ సైట్‌లోకి ఎలా పొందుపరచవచ్చో మరియు మీరు ఎదుర్కొనే సమస్యలను ఇక్కడ మేము వెల్లడించబోతున్నాము.
ఫైల్ రకాలు మరియు బ్రౌజర్ అనుకూలత
ప్రారంభించడానికి, మేము HTML5 లో మద్దతిచ్చే విభిన్న వీడియో ఫైల్ రకాలను క్లుప్తంగా పరిశీలిస్తాము. ఇవి థియోరా OGG మరియు H.264 (.mp4). వేర్వేరు బ్రౌజర్‌లు వేర్వేరు రకాలను మద్దతిస్తాయి మరియు కొన్ని వాటికి మద్దతు ఇవ్వవు. కింది పట్టిక దీనిని సూచిస్తుంది:
| థియోరా OGG | H.264 (mp4) | |
|---|---|---|
| ఫైర్‌ఫాక్స్ 3.5+ | ✓ | x |
| Chrome 3+ | ✓ | ✓ |
| సఫారి 3+ | x | ✓ |
| ఒపెరా 10.5+ | ✓ | x |
| ఇంటర్నెట్ ఎక్స్ప్లోరర్ 8 | x | x |
| ఇంటర్నెట్ ఎక్స్ప్లోరర్ 9 | x | ✓ |
| ఐఫోన్ | x | ✓ |
| Android | x | ✓ |
కోడెక్స్ మరియు ఇతర సాంకేతిక సమస్యలు
HTML5 ఉపయోగించడానికి వీడియో కోడెక్‌ను పేర్కొనలేదు మరియు ఇది ఏది అనే వాదనలకు దారితీసింది వెబ్ కోసం ఉపయోగించడం ఉత్తమం . కాబట్టి అన్ని బ్రౌజర్‌లను కవర్ చేయడానికి, మేము రెండు కోడెక్‌లకు మద్దతు ఇవ్వాలి.
ఆపై ఇంటర్నెట్ ఎక్స్ప్లోరర్ ఉంది. ప్రస్తుతానికి, ఇంటర్నెట్ ఎక్స్ప్లోరర్ విడుదల చేసిన సంస్కరణలు ఏవీ వీడియో ఎలిమెంట్‌కు మద్దతు ఇవ్వవు మరియు వీడియోను ప్లే చేయడానికి ప్లగిన్ ఇంకా అవసరం. ఇంటర్నెట్ ఎక్స్ప్లోరర్ 9 (వచ్చే ఏడాది ప్రారంభంలో) విడుదలతో ఇది మారుతుంది, హెచ్ .264 తో పాటు, అనేక ఇతర HTML5 గూడీస్‌తో పాటు.
ఒకవేళ మీరు ఎలా ఆలోచిస్తున్నారో, మీరు మీ వీడియో ఫైళ్ళను OGG కి మార్చవచ్చు (మీరు థియోరా OGG రకం గురించి మరింత చదవవచ్చు థియోరాక్‌బుక్ ) ఉపయోగించి ఫైల్స్ మిరో వీడియో కన్వర్టర్ .
వీడియో ఎలిమెంట్ మరియు కోడెక్స్‌పై మరింత లోతైన సమాచారం కోసం, వెళ్ళండి html5 లోకి ప్రవేశించండి: వెబ్‌లో వీడియో మార్క్ పిల్గ్రిమ్ చేత.
HTML5 కోడ్
ఇప్పుడు మేము అసలు HTML5 కోడ్‌లోకి వెళ్తాము మరియు పనిని ఎలా పొందగలం. HTML5 మా వెబ్ పేజీలకు వీడియోను జోడించడానికి ఉపయోగించే రెండు కొత్త అంశాలను అందిస్తుంది: | _ _ + _ | మూలకం, మేము ఇప్పటికే పేర్కొన్నది మరియు | _ + + | మూలకం. వీటిలో ప్రతి ఒక్కటి చూద్దాం.
మూలకం
వీడియో మూలకం క్రింది లక్షణాలను కలిగి ఉంటుంది:
| గుణం | వివరణ |
|---|---|
| src | వీడియో ఫైల్‌కు చెల్లుబాటు అయ్యే URL |
| ఆటోప్లే | వీడియో స్వయంచాలకంగా ప్లే కావాలో సూచించే బూలియన్ |
| నియంత్రణలు | డిఫాల్ట్ మీడియా నియంత్రణలు బ్రౌజర్ ద్వారా ప్రదర్శించబడాలని సూచించే బూలియన్ |
| లూప్ | వీడియోను పదేపదే ప్లే చేయాలా వద్దా అని సూచించే బూలియన్ |
| ప్రీలోడ్ | వీడియో యొక్క ముందస్తు డౌన్‌లోడ్ అవసరమా లేదా మెటాడేటా మాత్రమే అవసరమా అని బ్రౌజర్‌కు సూచిస్తుంది. సాధ్యమయ్యే విలువలు:
|
| పోస్టర్ | వీడియో డేటా అందుబాటులో లేనప్పుడు ప్రదర్శించాల్సిన ఇమేజ్ ఫైల్‌కు URL |
| వెడల్పు | CSS పిక్సెల్‌లలో వీడియో యొక్క వెడల్పు |
| ఎత్తు | CSS పిక్సెల్‌లలో వీడియో యొక్క ఎత్తు |
దీని నుండి, వీడియో ఎలిమెంట్‌ను ఉపయోగించి మీ వెబ్‌సైట్‌లో OGG వీడియోను పొందుపరచడం ఎంత సులభమో చూడవచ్చు:
నిజంగా దీనికి అంతా ఉంది.
థియోరా OGG ఆకృతికి మద్దతిచ్చే ఏదైనా బ్రౌజర్ ఇప్పుడు మీ వీడియోను మరింత శ్రమ లేకుండా విజయవంతంగా ప్రదర్శిస్తుంది మరియు ప్లే చేయాలి. వాస్తవానికి ఇది అంత సులభం కాదు, ఎందుకంటే పై పట్టిక నుండి మనం చూసినట్లుగా, కోడ్ ఫైర్‌ఫాక్స్, క్రోమ్ మరియు ఒపెరాలో మాత్రమే పనిచేస్తుంది. కాబట్టి మేము H.264 కు కూడా తిరిగి రావాలి. ఉపయోగించి దీన్ని సాధించవచ్చు మూలకం, ఇది వీడియో మూలకం కోసం బహుళ మీడియా వనరులను నిర్వచించడానికి అనుమతిస్తుంది.
మ్యాచ్ కామ్ సభ్యత్వాన్ని ఎలా రద్దు చేయాలి
మూలకం
మూల మూలకం కింది లక్షణాలను కలిగి ఉంది:
| గుణం | వివరణ |
|---|---|
| src | మీడియాకు చెల్లుబాటు అయ్యే URL (ఈ సందర్భంలో వీడియో) ఫైల్ |
| టైప్ చేయండి | తప్పనిసరిగా ఉండాలి మీడియా ఫైల్ రకం MIME రకం , ఉదా. |
| సగం | మీడియా వనరు యొక్క ఉద్దేశించిన మీడియా రకాన్ని ఇస్తుంది మరియు తప్పనిసరిగా చెల్లుబాటు అయ్యేది మీడియా ప్రశ్న , ఉదా. type='video/ogg' వీడియో హ్యాండ్‌హెల్డ్ పరికరాలకు అనుకూలంగా ఉందని సూచిస్తుంది లేదా type='video/ogg; codecs='theora, vorbis' ఇది 720 పిక్సెల్‌లు లేదా అంతకంటే ఎక్కువ స్క్రీన్‌లకు తగినదని సూచిస్తుంది. |
గమనిక: మూల మూలకం శూన్యమైనది మరియు ప్రారంభ ట్యాగ్‌ను కలిగి ఉంది కాని ముగింపు ట్యాగ్ లేదు
సోర్స్ ఎలిమెంట్ గురించి చాలా ఉపయోగకరమైన విషయం ఏమిటంటే, మేము దానిని వేర్వేరు ఫైల్ రకాలను పేర్చడానికి ఉపయోగించవచ్చు, బ్రౌజర్ ప్లే చేయగలదాన్ని కనుగొనే వరకు ప్రతిదాన్ని ప్రయత్నించడానికి అనుమతిస్తుంది.
ఉపయోగించడం మరియు కలిసి
వీడియో మూలకంలో విభిన్న రకాల్లో వీడియోలను పేర్చడానికి, మేము ఈ క్రింది విధంగా కోడ్‌ను నమోదు చేస్తాము:
media='handheld'
పై కోడ్ ఇప్పుడు ఇంటర్నెట్ ఎక్స్ప్లోరర్ మినహా అన్ని బ్రౌజర్‌లలో పని చేస్తుంది, ఇది పైన సూచించిన సందేశాన్ని ప్రదర్శిస్తుంది.
థియోరా OGG మరియు MP4 ఫార్మాట్ రెండింటిలోనూ సీతాకోకచిలుక యొక్క నమూనా వీడియోను కలిగి ఉన్న HTML5 టెస్ట్ వీడియో పేజీని చూడటం ద్వారా మీరు దీనిని మీరే పరీక్షించవచ్చు, కాబట్టి మీరు దీన్ని ఫైర్‌ఫాక్స్, క్రోమ్, సఫారి, ఒపెరా లేదా ఐఫోన్ లేదా ఐఫోన్‌లో చూస్తున్నట్లయితే Android హ్యాండ్‌సెట్, మీరు దీన్ని చూడగలుగుతారు.
మీ మధ్య ఉన్న పదునైన కత్తులు ఇప్పుడు మేము ఈ స్టాకింగ్ యొక్క ప్రయోజనాన్ని పొందగలమని మరియు క్షమించండి ప్రదర్శించడానికి బదులుగా దిగువన ఉన్న ఫ్లాష్ (లేదా మరికొన్ని ప్లగ్ఇన్) కు తిరిగి రావడాన్ని గమనించవచ్చు. కింది కోడ్‌ను ఉపయోగించడం ద్వారా మీరు ఈ వీడియో సందేశాన్ని చూడలేరు. :media='all and (min-device-height:720px)'
ముగింపు
చాలా HTML5 మూలకాల మాదిరిగా, మూలం మరియు వీడియో మూలకాలకు బ్రౌజర్ మద్దతు ప్రస్తుతం అస్పష్టంగా ఉంది. వెబ్‌సైట్‌లకు వీడియో కంటెంట్‌ను జోడించే అత్యంత ప్రాచుర్యం పొందిన పద్దతిగా ఫ్లాష్ వాడకాన్ని సోర్స్ ఎలిమెంట్ చంపేస్తుందా అనే దానిపై పెద్ద చర్చ జరుగుతోంది. ఇది ఫ్లాష్‌ను పూర్తిగా చంపుతుందని నాకు ఖచ్చితంగా తెలియదు, అయితే ఇది ఇక్కడే ఉందని చెప్పడం చాలా సరైంది అని నేను భావిస్తున్నాను మరియు వెబ్ డెవలపర్‌లకు వీడియోను పొందుపరచడానికి శుభ్రమైన, సులభమైన విధానాన్ని అందిస్తుంది.
