June 15, 2021

TechXlk

All About Technology

HTML VIDEO සහ AUDIO TAGS|TechXlk HTML Tutorial 06

HTML VIDEO සහ AUDIO ටැග්ස්

තවත් අලුත්ම ලිපියකට ඔබව සාධරයෙන් පිලිගන්නවා. මෙ ලිපියේදී අපි බලමු HTML වල Video සහ Audio භාවිතා කරන්නේ කෙසේද කියා.

Video tag

මුලින්ම අපි බලමු VIDEO එකක ඇති අවශ්‍යතාවය.

වෙබ් පිටුවක VIDEO එකක් තිබීම ඉතාම සුලබ දෙයක්, සාමන්‍යෙන් පැහැදිලි කිරීමට අපහසු දෙයක් පැහැදිලි කිරීම සඳහා අපට මෙම VIDEO ඉතා පහසුවෙන් භාවිතා කල හැකි බව අපි හැමදෙනාම දන්නවා. තවද වෙබ් පිටුවක ඇති ආකර්ෂනීය බව වැඩි කිරීමටද VIDEO එකක් යොද ගන්න පුලුවන්.

දැන් අපි බලමු HTML වෙබ් පිටුවකට VIDEO එකක් ඇතුලත් කරගන්නා ආකාරය

VIDEO ටැග් එක ගැන කතා කරද්දී HTML වෙබ් පිටු වලට VIDEO අතුලත් කිරීමට මෙම ටැග් එක බොහෝ විට භාවිතා වෙනවා. දැන් අපි බලමු එය සිදු කරන්නේ කෙසේද කියා.

<!DOCTYPE html>
<html>
<head>
	<title>video</title>
</head>
<body>

 <!--1st way  -->
<video src="Location.mp4"></video> 

<!-- 2nd way -->
<video src="C:/Users/Desktop/Location.mp4"></video> 

	</body>
</html>

ඉතින් ඔබට මතක ඇති මින් පෙර ලිපියකින් අපි පින්තූරයක් වෙබ් පිටුවකට ඇතුලත් කර ගන්න ආකාරය ගැන කතා කලා ඒ ලෙසින්ම මෙහිදීද එම VIDEO එක HTML code එක ඇති Folder එකේම තිබේනම් මෙහි පළමු ක්‍රමයද නැතහොත් වෙනම Folder එකක තිබේ නම් එම VIDEO එකේ properties වලට ගොස් “location” එක copy කර මෙහි paste කරන්න ඉන් පසු “\” මෙම සලකුනු සියල්ලට “/” මෙම සලකුන ආදේශ කරන්න.ඉහත කේතයේ ප්‍රතිදානය පහත රූපයේ දැක්වේ.

මෙහිදී ඔබට පෙනෙනවා ඇති එම VIDEO එක පින්තූරයක් ලෙස වෙබ් පිටුවේ දිස්වන ආකාරය. එම VIDEO එක play වීමක් හො play කිරීමට එහි CONTROLS වත් නැති භව ඔබට පෙනෙනවා ඇති.

ඉතින් දැන් අපි බලමු මෙ VIDEO එක play කිරීමට CONTROLS එයට  ඇතුල් කර ගන්න හැටි.

<!DOCTYPE html>
<html>
<head>
	<title>video</title>
</head>
<body>
<video src="My Video.mp4" controls></video> 
</body>
</html>



ඉහත කේතයේ ප්‍රතිදානය පහත රූපයේ දැක්වේ.

මෙම රූපයේ ඔබට දිස්වනවා ඇති එම VIDEO එක play කිරීම සඳහා අවශ්‍ය කරන CONTROLS එහි අන්තර්ගතවී ඇති බව.

හරි දැන් අපි ඒ VIDEO එකට play කිරීමට අවශ්‍ය CONTROLS ඇතුලත් කර ගත්තා.

හරි දැන් අපි කතා කරමු මේ VIDEO එකෙ ප්‍රමානය වෙනස් කරගන්නා ආකාරය පිලිබඳව. ඔබට මතක ඇති අපි පෙර ලිපියක පින්තූරයක ප්‍රමානය වෙනස් කළ ආකාරය ඉතින් එලෙසින්ම අපට මෙහිදීද ඉතා පහසුවෙන් එය සිදු කරගන්න පුලුවන්.

<!DOCTYPE html>
<html>
<head>
	<title>video</title>
</head>
<body>
<video src="My Video.mp4" controls height="100px" width="50px"></video> 
</body>
</html>

ඉතින් මෙම කේතය ඇතුලත් කිරීමෙන් පසු ඔබට පෙනෙනවා ඇති අපට අවශ්‍ය ආකාරයට එම VIDEO එකේ ප්‍රමානය වෙනස් වී ඇති බව. තවද ප්‍රමානය වෙනස් කිරීම සඳහා අප “% “, “px ” වැනි දේවල් භාවිතා කරන්න පුලුවන්.

සමහර අවස්ථාවලදී වෙබ් පිටුවට පිවිසුනු විට ස්වයංක්‍රීයවම එම VIDEOS play වන අවස්ථා ඔබ ඔන තරම් දැක ඇති. ඉතින් දැන් අපි බලමු එය සිදු කරන්නේ කෙසේද කියා.

<!DOCTYPE html>
<html>
<head>
	<title>video</title>
</head>
<body>
<video src="My Video.mp4" controls muted autoplay  height="100%" width="50%"></video> 
</body>
</html>

ඉතින් මෙම කේතය ඇතුලත් කිරීමෙන් පසු ඔබට පෙනෙනවා ඇති ඔබ වෙබ් පිටුවට පිවිසුනු විගස එම VIDEO එක ස්වයංක්‍රීයවම play වනවා තවද අප muted යන කේතය යෙදූ නිසා එය ශබ්දය රහිතව play වනවා.muted රහිතව VIDEO එක ස්වයංක්‍රීයවම play නොවේ.

ඔබට මෙම VIDEO එක නැවත නැවත play වීමට අවශ්‍යනම් ඒ සඳහා පහත කේතයේ “Loop” attribute කොටස ඇතුලත් කරන්න තවද ඔබට මෙම VIDEO එක play වීමට පෙර යම්කිසි රූපයක් එයමතට ඇතුලත් කිරීමට අවශ්‍යනම් පහත කේතයේ ඇති “Poster” attribute යන කොටස යොදා එයට ඔබට ඇතුලත් කිරීමට අවශ්‍ය රූපය පෙර අප location එක ඇතුලත් කල ආකාරයටම ඇතුලත් කරන්න. 

<!DOCTYPE html>
<html>
<head>
	<title>video</title>
</head>
<body>
<video src="My Video.mp4" controls muted autoplay loop poster="location.jpg"    height="100%" width="50%"></video> 
</body>
</html>

Video ඇතුලත් කිරීම සඳහා <VIDEO> ටැග් එක භාවිතයෙන්ම තවත් ක්‍රමයක් තිබෙනවා ඒ පිලිබඳව දැන් අපි කතා කරමු.

<!DOCTYPE html>
<html>
<head>
	<title>video</title>
</head>
<body>
<video controls muted autoplay loop height="100%" width="50%">
	<source src="My Video.mp4"  type="Video/mp4">
</video> 
</body>
</html>



ඉතින් මේ ආකාරයෙන්ද අපට වෙබ් පිටුවක් සඳහා VIDEO ඉතා පහසුවෙන් ඇතුලත් කර ගන්න පුලුවන්.

Audio Tag

ඔබට ඔබෙ වෙබ් පිටුවට Audio file එකක් ඇතුලත් කරගැනීමට හැකි ආකාරය පිලිබඳව අපි දැන් කතා කරමු.

හරි දැන් අපි බලමු වෙබ් පිටුවකට Audio file එකක් ඇතුලත් කරගන්නේ කෙසේද කියා.

<!DOCTYPE html>
<html>
<head>
	<title>video</title>
</head>
<body>
 <audio controls>
	<source src="C:/Users/Desktop/song.mp3" type="Audio/mp3">
</audio>
</body>
</html>



ඉහත කේතයේ ප්‍රතිදානය පහත රූපයේ දැක්වේ.

එහිදීද පෙර ටැග් එකේ පරිදිම අපට “Loop”, “Muted”,”Controls” වැනි Attributes භාවිතා කර එය ඉතා පහසුවෙන් වෙබ් පිටුවකට ඇතුලත් කර ගන්න පුලුවන්.