HTML Video - Jassif Team

HTML வீடியோ

HTML <video> உறுப்பு வலைப்பக்கத்தில் ஒரு வீடியோவைக் காட்ட பயன்படுகிறது.

வீடியோ எடுத்துக்காட்டு

Big Buck Bunny நன்றி

<video> உறுப்பு

HTML இல் வீடியோவைக் காட்ட, <video> உறுப்பைப் பயன்படுத்தவும்:

<video width="320" height="240" controls>
  <source src="video1.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  உங்கள் உலாவி வீடியோ குறிச்சொல்லை ஆதரிக்கவில்லை.
</video>

இது எப்படி செயல்படுகிறது

முக்கிய பண்புக்கூறுகள்:

controls

வீடியோ கட்டுப்பாடுகளைச் சேர்க்கிறது, பிளே, பாஸ் மற்றும் வால்யூம் போன்றவை

width & height

வீடியோவின் அகலம் மற்றும் உயரத்தை அமைக்கிறது. அமைக்கப்படவில்லை என்றால், வீடியோ ஏற்றப்படும் போது பக்கம் சிமிட்டலாம்

<source>

மாற்று வீடியோ கோப்புகளைக் குறிப்பிட அனுமதிக்கிறது. உலாவி முதல் அறியப்பட்ட வடிவத்தைப் பயன்படுத்தும்

💡 முக்கிய குறிப்பு:

<video> மற்றும் </video> குறிச்சொற்களுக்கு இடையே உள்ள உரை <video> உறுப்பை ஆதரிக்காத உலாவிகளில் மட்டுமே காட்டப்படும்.

HTML <video> Autoplay

வீடியோவை தானாகத் தொடங்க, autoplay பண்புக்கூறைப் பயன்படுத்தவும்:

எடுத்துக்காட்டு

<video width="320" height="240" autoplay>
  <source src="video1.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  உங்கள் உலாவி வீடியோ குறிச்சொல்லை ஆதரிக்கவில்லை.
</video>

⚠️ குறிப்பு:

Chromium உலாவிகள் பெரும்பாலான சந்தர்ப்பங்களில் autoplay ஐ அனுமதிப்பதில்லை. இருப்பினும், நிச்சயமாக autoplay எப்போதும் அனுமதிக்கப்படுகிறது.

உங்கள் வீடியோ தானாக விளையாடத் தொடங்குவதற்கு autoplay க்குப் பிறகு muted ஐச் சேர்க்கவும் (ஆனால் முட்கிரிக்கப்பட்டது):

<video width="320" height="240" autoplay muted>
  <source src="video1.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  உங்கள் உலாவி வீடியோ குறிச்சொல்லை ஆதரிக்கவில்லை.
</video>

உலாவி ஆதரவு

அட்டவணையில் உள்ள எண்கள் <video> உறுப்பை முழுமையாக ஆதரிக்கும் முதல் உலாவி பதிப்பைக் குறிக்கின்றன.

Chrome

4.0

Edge

9.0

Firefox

3.5

Safari

4.0

Opera

10.5

உறுப்பு	Chrome	Edge	Firefox	Safari	Opera
<video>	4.0	9.0	3.5	4.0	10.5

HTML வீடியோ வடிவங்கள்

மூன்று ஆதரிக்கப்பட்ட வீடியோ வடிவங்கள் உள்ளன: MP4, WebM, மற்றும் Ogg. வெவ்வேறு வடிவங்களுக்கான உலாவி ஆதரவு:

உலாவி	MP4	WebM	Ogg
Edge	YES	YES	YES
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

HTML வீடியோ - மீடியா வகைகள்

கோப்பு வடிவம்	மீடியா வகை
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

📁 type பண்புக்கூறு:

<source> உறுப்பில் type பண்புக்கூறு முக்கியமானது. இது உலாவிக்கு வீடியோ வடிவத்தைக் கூறுகிறது, இதனால் உலாவி அதை விளையாட முடியுமா என்று சீக்கிரமாக முடிவு செய்ய முடியும்.

HTML வீடியோ - முறைகள், பண்புகள் மற்றும் நிகழ்வுகள்

HTML DOM <video> உறுப்புக்கான முறைகள், பண்புகள் மற்றும் நிகழ்வுகளை வரையறுக்கிறது.

இது வீடியோக்களை ஏற்றவும், விளையாடவும், நிறுத்தவும், மேலும் கால அளவு மற்றும் வால்யூமை அமைக்கவும் உங்களை அனுமதிக்கிறது.

வீடியோ விளையாடத் தொடங்கும்போது, நிறுத்தப்படும்போது போன்றவற்றை உங்களுக்கு அறிவிக்கக்கூடிய DOM நிகழ்வுகளும் உள்ளன.

எடுத்துக்காட்டு: JavaScript பயன்படுத்துதல்

வீடியோ நிலை: தயாராக உள்ளது

Video courtesy of Big Buck Bunny.

// JavaScript எடுத்துக்காட்டு
var video = document.getElementById("jsVideo");

// விளையாடு பொத்தான்
document.getElementById("playBtn").onclick = function() {
video.play();
};

// நிறுத்து பொத்தான்
document.getElementById("pauseBtn").onclick = function() {
video.pause();
};

🔗 DOM குறிப்பு:

முழு DOM குறிப்பிற்கு, எங்கள் HTML Audio/Video DOM Reference ஐப் பார்வையிடவும்.

HTML வீடியோ குறிச்சொற்கள்

குறிச்சொல்	விளக்கம்
<video>	ஒரு வீடியோ அல்லது திரைப்படத்தை வரையறுக்கிறது
<source>	<video> மற்றும் <audio> போன்ற மீடியா உறுப்புகளுக்கு பல மீடியா வளங்களை வரையறுக்கிறது
<track>	மீடியா பிளேயர்களில் உரை தடங்களை வரையறுக்கிறது

🎯 முக்கிய புள்ளிகள்:

வீடியோவை எப்போதும் ஒன்றுக்கு மேற்பட்ட வடிவத்தில் வழங்கவும் (MP4, WebM, Ogg)
width மற்றும் height பண்புக்கூறுகளை எப்போதும் சேர்க்கவும்
உலாவி இணக்கத்திற்காக controls பண்புக்கூறைச் சேர்க்கவும்
autoplay ஐப் பயன்படுத்தும் போது எப்போதும் muted ஐச் சேர்க்கவும்
<source> உறுப்பில் type பண்புக்கூறைக் குறிப்பிடவும்