සුභ දවසක්, ගොඩක් කාලෙකින් ආයෙත් පටන් ගත්තා html පාඩම් මාලාව. අද අපි බලමු Html වලින් කොහොමද Media File එකක් වෙබ් පිටුවකට ඇතුල් කරගන්නේ කොහොමද කියලා, Media Files එක්ක වැඩ කරන්නේ කොහොමද කියලා. වෙබ් පිටු නිර්මාණයේදී භාවිතා කරන්නට සිදු වන ප්‍රධාන media Formats ලෙස,

Video Files
Audio Files
YouTube Media

ලෙස දැක්විය හැක. අපි ඒවා යොදන ආකාරය විමසා බලමු

HTML Video

FormatFileDescription
MPEG.mpg
.mpeg
MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the web. Used to be supported by all browsers, but it is not supported in HTML5 (See MP4).
AVI.aviAVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers.
WMV.wmvWMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers.
QuickTime.movQuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays well on Apple computers, but not in web browsers. (See MP4)
RealVideo.rm
.ram
RealVideo. Developed by Real Media to allow video streaming with low bandwidths. It is still used for online video and Internet TV, but does not play in web browsers.
Flash.swf
.flv
Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers.
Ogg.oggTheora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.
WebM.webmWebM. Developed by the web giants, Mozilla, Opera, Adobe, and Google. Supported by HTML5.
MPEG-4
or MP4
.mp4MP4. Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used in newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended by YouTube. 

මෙහිදී අපි විමසා බලමු කොහොමද වෙබ් පිටුවකට html මගින් විඩියෝ එකක් add කරගන්නේ කොහොමද කියලා. 

<html> 
<body> 

<video width="600" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
</video>

</body> 
</html>

‌video එකක් html හා එක් කිරීමට යොදාගනු ලබන්නේ <video> හා </video> tags තුලයි.
Video width 400px ක් විදිහට මෙතන දුන්නට ඔයාට ගැලපෙන Size එකට Video එක Resize කරගන්න පුළුවන්. controls attribute එක මෙහිදී යොදාගන්නේ video එක control කිරීමට යොදාගන්නා Play, Pause, Volume එක් කර ගැනීමටයි.

<source src="mov_bbb.mp4" type="video/mp4">

video source එකට video path එක දෙන්න.  ex: <source src= “your_video.mp4”

HTML Audio

වෙබ් පිටුවකට Audio File එකක් එක් කරන ආකාරය විමසා බලමු. 

<html>
<body>

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
</audio>

</body>
</html>

Audio එකක් html හා එක් කිරීමට යොදාගනු ලබන්නේ <audio> හා </audio> tags තුලයි. controls attribute එක මෙහිදී යොදාගන්නේ video එක control කිරීමට යොදාගන්නා Play, Pause, Volume එක් කර ගැනීමටයි.

YouTube Video

YouTube video එකක් අපිට ක්‍රම කිහිපයකින් වෙබ් පිටුවකට ඇතුලත් කරගන්න පුළුවන්.

Using iFrame

<html>
<body>
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</body>
</html>

YouTube Autoplay

<html>
<body>
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>
</body>
</html>

YouTube – Loop

<html>
<body>
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
</body>
</html>

Using <object> or <embed>

<html>
<body>
<object width="420" height="315"
data="https://www.youtube.com/v/tgbNymZ7vqY">
</object>
</body>
</html>
<html>
<body>
<embed width="420" height="315"
src="https://www.youtube.com/v/tgbNymZ7vqY">
</body>
</html>


මම හිතනවා html tags පිළිබදව අපි කලින් පාඩම් වලින් කතා කල නිසා මේවා එකින් එක පැහැදිලි කරන්න ඕනේ නැතිවෙයි කියලා.  ඉතින් පැහැදිලි නැති තැනක් තියෙනවනම් කියන්න. කමේන්ට් කරන්න. 

අදහස් දක්වන්න

අදහස්

‌රැදී සිටින්න...

ඔබත් ගීක් කෙනෙක්ද?

අලුත්ම Geek ලිපි එසැනින් ලබාගන්න අපිව Subscribe කරන්න. දැනුම සොයා යන තරුණ ඔබත් එන්න,ගීක් කෙනෙකු වන්න,

ඔබත් දැන්ම ගීක් කෙනෙක් වෙන්න!

You have successfully subscribed to the Geek

There was an error while trying to send your request. Please try again.

SL Geek LK will use the information you provide on this form to be in touch with you and to provide updates and marketing.

ස්මාර්ට් ගීක් කෙනෙක් වෙන්න! ගීක් මොබයිල් ඇප් එක දාගන්න.

Download Geek App now