HTML5 உடன் உங்கள் வலைத்தளத்திற்கு வீடியோவைச் சேர்த்தல்

அவரது முதல் வலைப்பதிவில் பிசி புரோ , இனையதள வடிவமைப்பாளர் இயன் டெவ்லின் HTML5 உடன் உங்கள் வலைத்தளத்தில் வீடியோவை எவ்வாறு உட்பொதிப்பது என்பதை வெளிப்படுத்துகிறது

மின்சாரம் அதிகரித்த பிறகு உங்கள் தொலைக்காட்சி வராவிட்டால் என்ன தேட வேண்டும்

HTML5 இன் மிகப்பெரிய மற்றும் அதிகம் பேசப்படும் அம்சம் உட்பொதிக்கப்பட்ட வீடியோவாக இருக்கலாம். தற்போது, ​​உங்கள் வலைத்தளத்திற்கு வீடியோ உள்ளடக்கத்தைச் சேர்ப்பதற்கான ஒரே முறை ஃப்ளாஷ், குயிக்டைம் அல்லது ரியல் பிளேயர் போன்ற மூன்றாம் தரப்பு சொருகி மட்டுமே. HTML5 மற்றும் வீடியோ உறுப்பு ஆகியவற்றின் விடியலுடன் இது அனைத்தும் மாறும், வீடியோ ஆதரவு வலை உலாவியால் கையாளப்படுகிறது, எந்த மூன்றாம் தரப்பு ஆதரவின் தேவையையும் நீக்குகிறது.

பல வலை உலாவிகள் ஏற்கனவே HTML5 க்கான ஆதரவை வழங்குகின்றன. சொருகி இல்லாத வீடியோவை உங்கள் தளத்தில் எவ்வாறு உட்பொதிக்கலாம் என்பதையும் நீங்கள் எதிர்கொள்ளும் சிக்கல்களையும் இங்கே வெளிப்படுத்த உள்ளோம்.

கோப்பு வகைகள் மற்றும் உலாவி பொருந்தக்கூடிய தன்மை

தொடங்குவதற்கு, HTML5 இல் ஆதரிக்கப்படும் வெவ்வேறு வீடியோ கோப்பு வகைகளை சுருக்கமாகப் பார்ப்போம். இவை தியோரா OGG மற்றும் H.264 (.mp4). வெவ்வேறு உலாவிகள் வெவ்வேறு வகைகளை ஆதரிக்கின்றன, மேலும் சிலவற்றை ஆதரிக்காது. பின்வரும் அட்டவணை இதைக் குறிக்கிறது:

கோடெக்குகள் மற்றும் பிற தொழில்நுட்ப சிக்கல்கள்

HTML5 ஒரு வீடியோ கோடெக்கைப் பயன்படுத்துவதைக் குறிப்பிடவில்லை, இது எது என்ற வாதங்களுக்கு வழிவகுத்தது வலையில் பயன்படுத்த சிறந்தது . எனவே அனைத்து உலாவிகளையும் மறைக்க, நாங்கள் இரண்டு கோடெக்குகளையும் ஆதரிக்க வேண்டும்.

பின்னர் நிச்சயமாக இன்டர்நெட் எக்ஸ்ப்ளோரர் உள்ளது. இந்த நேரத்தில், இன்டர்நெட் எக்ஸ்ப்ளோரரின் வெளியிடப்பட்ட பதிப்புகள் எதுவும் வீடியோ உறுப்பை ஆதரிக்கவில்லை, மேலும் வீடியோவை இயக்க ஒரு சொருகி இன்னும் தேவைப்படுகிறது. இன்டர்நெட் எக்ஸ்ப்ளோரர் 9 (அடுத்த ஆண்டு தொடக்கத்தில்) வெளியீட்டில் இது மாறும், எச் .264 ஆதரிக்கப்படும், மேலும் பல HTML5 இன்னபிற பொருட்களுடன்.

எப்படி என்று நீங்கள் யோசிக்கிறீர்கள் என்றால், உங்கள் வீடியோ கோப்புகளை OGG ஆக மாற்றலாம் (தியோரா OGG வகையைப் பற்றி மேலும் படிக்கலாம் தியோராக்புக் ) பயன்படுத்தும் கோப்புகள் மிரோ வீடியோ மாற்றி .

வீடியோ உறுப்பு மற்றும் கோடெக்குகள் பற்றிய மேலும் ஆழமான தகவலுக்கு, செல்லுங்கள் html5: இணையத்தில் வீடியோ வழங்கியவர் மார்க் பில்கிரிம்.

HTML5 குறியீடு

இப்போது நாம் உண்மையான HTML5 குறியீட்டிற்குச் செல்கிறோம், மேலும் அதை எவ்வாறு வேலை செய்ய முடியும். எங்கள் வலைப்பக்கங்களில் வீடியோவைச் சேர்க்க நாம் பயன்படுத்தக்கூடிய இரண்டு புதிய கூறுகளை HTML5 வழங்குகிறது: | _ _ + _ | உறுப்பு, நாங்கள் ஏற்கனவே குறிப்பிட்டுள்ளோம், மற்றும் | _ + + | உறுப்பு. இவை ஒவ்வொன்றையும் பார்ப்போம்.

உறுப்பு

வீடியோ உறுப்பு பின்வரும் பண்புகளை கொண்டிருக்கலாம்:

இதிலிருந்து, வீடியோ உறுப்பை மட்டும் பயன்படுத்தி உங்கள் இணையதளத்தில் ஒரு OGG வீடியோவை உட்பொதிப்பது எவ்வளவு எளிது என்பதைக் காணலாம்:

உண்மையில் அதுதான்.

தியோரா ஓஜிஜி வடிவமைப்பை ஆதரிக்கும் எந்த உலாவியும் இப்போது உங்கள் வீடியோவை வெற்றிகரமாக காட்டாமல் இயக்க வேண்டும். நிச்சயமாக அது அவ்வளவு எளிதானது அல்ல, ஏனென்றால் மேலே உள்ள அட்டவணையில் இருந்து பார்த்தபடி, குறியீடு பயர்பாக்ஸ், குரோம் மற்றும் ஓபராவில் மட்டுமே செயல்படும். எனவே H.264 க்கும் ஒரு குறைவு இருக்க வேண்டும். ஐப் பயன்படுத்தி இதை அடையலாம் உறுப்பு, இது வீடியோ உறுப்புக்கான பல ஊடக ஆதாரங்களை வரையறுக்க அனுமதிக்கிறது.

Chrome இல் வீடியோக்கள் தானாக இயங்குவதை எவ்வாறு தடுப்பது

உறுப்பு

மூல உறுப்பு பின்வரும் பண்புகளைக் கொண்டுள்ளது:

குறிப்பு: மூல உறுப்பு வெற்றிடமானது மற்றும் தொடக்க குறிச்சொல் உள்ளது, ஆனால் இறுதி குறிச்சொல் இல்லை

மூல உறுப்பு பற்றி மிகவும் பயனுள்ள விஷயம் என்னவென்றால், வெவ்வேறு கோப்பு வகைகளை அடுக்கி வைப்பதற்கு இதைப் பயன்படுத்தலாம், உலாவியை இயக்கக்கூடிய ஒன்றைக் கண்டுபிடிக்கும் வரை ஒவ்வொன்றையும் முயற்சிக்க அனுமதிக்கிறது.

பயன்படுத்தி மற்றும் ஒன்றாக

வீடியோ உறுப்புக்குள் வெவ்வேறு வகைகளில் வீடியோக்களை அடுக்கி வைக்க, குறியீட்டை பின்வருமாறு உள்ளிடுகிறோம்:

media='handheld'

மேலே உள்ள குறியீடு இப்போது இன்டர்நெட் எக்ஸ்ப்ளோரரைத் தவிர அனைத்து உலாவிகளிலும் வேலை செய்யும், இது மேலே சுட்டிக்காட்டப்பட்ட செய்தியைக் காண்பிக்கும்.

தியோரா ஓஜிஜி மற்றும் எம்பி 4 வடிவங்களில் பட்டாம்பூச்சியின் மாதிரி வீடியோவைக் கொண்ட HTML5 டெஸ்ட் வீடியோ பக்கத்தைப் பார்ப்பதன் மூலம் இதை நீங்களே சோதிக்கலாம், எனவே இதை நீங்கள் ஃபயர்பாக்ஸ், குரோம், சஃபாரி, ஓபரா அல்லது ஐபோன் அல்லது ஐபோனில் பார்க்கிறீர்கள் என்றால் Android கைபேசி, நீங்கள் அதைப் பார்க்க முடியும்.

உங்களிடையே உள்ள கூர்மையான கத்திகள், இந்த குவியலிடுதலை நாங்கள் பயன்படுத்திக் கொள்ளலாம் என்பதையும், மன்னிக்கவும் என்பதைக் காண்பிப்பதற்குப் பதிலாக கீழே உள்ள ஃப்ளாஷ் (அல்லது வேறு ஏதேனும் சொருகி) க்கு ஒரு குறைவைக் கொண்டிருப்பதை இப்போது கவனிப்பீர்கள், பின்வரும் குறியீட்டைப் பயன்படுத்துவதன் மூலம் இந்த வீடியோ செய்தியைக் காண முடியாது. :
media='all and (min-device-height:720px)'

முடிவுரை

பெரும்பாலான HTML5 கூறுகளைப் போலவே, மூல மற்றும் வீடியோ கூறுகளுக்கான உலாவி ஆதரவு தற்போது ஒட்டு மொத்தமாக உள்ளது. வலைத்தளங்களில் வீடியோ உள்ளடக்கத்தைச் சேர்ப்பதற்கான மிகவும் பிரபலமான முறையாக ஃப்ளாஷ் பயன்பாட்டை மூல உறுப்பு அழிக்குமா என்பது பற்றியும் ஒரு பெரிய விவாதம் நடந்து வருகிறது. இது ஃப்ளாஷ் முழுவதையும் கொல்லும் என்று எனக்குத் தெரியவில்லை, ஆனாலும் இது இங்கேயே இருக்கிறது என்று சொல்வது நியாயமானது என்று நான் நினைக்கிறேன், மேலும் வலை உருவாக்குநர்களுக்கு வீடியோவை உட்பொதிப்பதற்கான தூய்மையான, எளிதான அணுகுமுறையை வழங்கும்.