ওয়েব ডিজাইন (পর্ব ০৭) ওয়েব পেজে মিডিয়া আপলোড, অডিও, ভিডিও, আইফ্রেম, ইমেজ হট লিংকিং, অনলাইন ভিডিও এমবেডিং

ওয়েব ডিজাইন (পর্ব ০৭) ওয়েব পেজে মিডিয়া আপলোড, অডিও, ভিডিও, আইফ্রেম, ইমেজ হট লিংকিং, অনলাইন ভিডিও এমবেডিং
বৃহস্পতিবার, ৩০ জুলাই, ২০২০
আস্‌সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজকের নতুন টপিকে আপনাকে স্বাগতম! আজকে আপনাদের দেখাবো কিভাবে ওয়েব পেজে মিডিয়া আপলোড, অডিও ভিডিও আইফ্রেম, ইমেজ হট লিংকিং, অনলাইন ভিডিও এমবেডিং ।

ওয়েব পেজে মিডিয়া আপলোডঃ

আমরা যে সকল পেজ তৈরি করবো সেখানে প্রয়োজন মতো অনেক সময় বিভিন্ন ধরণের মিডিয়া ফাইল আপলোড ও ভিউ করার প্রয়োজন পড়ে।এই মিডিয়া ফাইল গুলো আমরা কি কি ভাবে আমাদের ওয়েব পেজে প্রদর্শন করতে পারি সব বিষয় নিয়ে আজকে আলোচনা করবো।

প্রথমে আপনার ফাইল ম্যানেজারে আপনার নির্দিষ্ট ফাইলটি আপলোড করতে হবে।তারপর আপনার ফাইল ম্যানেজারের লোকেশন অনুযায়ী নির্দিষ্ট কোড দ্বারা আপনার মিডিয়া ফাইলটি ওয়েব পেজে প্রদর্শন করাতে পারবেন।

ব্রাউজার সাপোর্টঃ

অনেক অনেক ফাইল এর মধ্যে সব ফাইলই ব্রাউজারে সাপোর্ট করে না। অল্প কিছু এক্সটেশনের ফাইল ব্রাউজারে প্রদর্শন করানো সম্ভব।আবার অডিও ভিডিও কোড ইন্টারনেট এক্সপ্লোরারের (IE 9 এর নিচে) কাজ করেনা।
ওয়েব ব্রাউজারে সাধারণত .MP4, .WebM, .Ogg, MP3 এই ফরম্যাটের ফাইল গুলো বেশি ব্যবহার হয়ে থাকে। এই ফাইল গুলো ব্যবহার করাই ভালো। আরো কিছু এক্সটেনশন আছে যা সাপোর্ট করে তবে না ইউজ করলেও সমস্যা নাই।

অডিও ফাইল আপলোড ও ভিউঃ

আমরা প্রথমে কোনো একটি অডিও ফাইল আমাদের হোস্টিং এর ফাইল ম্যানেজারে রাখতে হবে তারপর উক্ত ফাইলের লোকেশন বের করতে হবে।এবার আমাদের অডিও ফাইল আমাদের ওয়েব পেজে প্রদর্শন করানোর জন্য কোডিং করতে হবে।
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Browser Not Working</audio>

ভিডিও ফাইল আপলোড ও ভিউঃ

অডিও ফাইল এর আর ভিডিও ফাইলের কোড প্রায় একই।আমরা যখন আমাদের সাইটে কোনো ভিডিও দিতে চাইবো তখন আমাদের এই কোডটি ব্যবহার করতে হবে।
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Browser Not Sapport
</video>

অটো প্লে ভিডিওঃ

ইউজারদের আরো বেশি সুবিধা দেওয়ার জন্য আমাদের অনেক সময় অটো প্লে ভিডিও প্রদর্শন করার প্রয়োজন হয়।যেমন ইউটিউব এ অটোমেটিক ভিডিও প্লে হয়।
এই অটো প্লে কোড খুবই অল্প একটু কোড যা এচটিএমএল এর নিয়ম মানে না।আমরা ভিডিও ট্যাগের মধ্যে এট্রিবিউটের মতো করে ব্যবহার করবো তবে এইটার এট্রিবিউটের মতো চেহারা নাই।এই ট্যাগ সিঙ্গেল ভাবে থাকে।
<video width="320" height="240" controls autoplay>
<source src="video.mp4" type="video/mp4">
Browser Not Sapport
</video>

আইফ্রেমঃ

আইফ্রেম এর কাজ হলো কোনো সাইটের থেকে হুবহু নির্দিষ্ট পেজ নিজের ওয়েব সাইটে দেখানো।অনেক সময় নিজেদের সাইট নিজেদের পেজে দেখানোর প্রয়োজন হয় তখনও আমরা এই আইফ্রেম কোড ইউজ করে থাকি।
<iframe src="https://www.wikijana.com" height="200" width="300"></iframe>

ইমেজ হট লিংকিংঃ

ইমেজ হট লিংকিং বলতে অন্যের হোস্টে রাখা ইমেজকে নিজের সাইটে বসানো। আপনি ইন্টারনেটের অন্য কোনো সোর্স থেকে ইমেজ লিংক কপি করে যদি নিজের সাইটে নিয়ে থাকেন তবেই আপনি ইমেজ হট লিংকিং করলেন।
যেমনঃ <img src="http://ওয়েবসাইট.কম/ইমেজ/ফটো.JPG">

অনলাইন ভিডিও এমবেডিংঃ

আমাদের সাইটে অনেক সময় ভিডিও এমবেড করার প্রয়োজন হয়।যেমন এখন বেশি পরিমানে ইউটিউব ভিডিও এমবেড করা হয়।তাড়াও আরো ভিডিও শেয়ারিং ওয়েব সাইট আছে সেগুলো থেকেও আমরা এমবেড করতে পারি।ভিডিও এমবেড আইফ্রেম কোড ইউজ করা হয়।
<iframe width="1280" height="720" src="https://www.youtube.com/embed/QEbAq60nvDk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে।







Samrat Raihan

I am a web designer and developer. I regularly work for different companies. I try to write a little on this blog when I have time.If you can learn something from this blog, then I will be successful.