আজ আপনি শিখবেন কীভাবে দ্রুত HTML-এ MP4 ভিডিও এম্বেড করতে হয় <video> এলিমেন্ট ব্যবহার করে। আমি নিচের বিষয়গুলো কভার করব:
- ভিডিও প্লেয়ারের আকার কীভাবে এডজাস্ট করবেন
- ভিডিও অটোপ্লে কীভাবে করবেন
- ভিডিও ইনফিনিটলি লুপ কীভাবে করবেন
বেশিরাগ টিউটোরিয়াল ছোট ভিডিও ইলাস্ট্রেট করার জন্য GIF ব্যবহার করে। আমি দেখেছি MP4-র কোয়ালিটি ভালো, এবং স্পেস কম নেয়। WebM-এর বিপরীতে MP4 সব আধুনিক ব্রাউজারে কাজ করে, এবং আপনি সেগুলো YouTube-এর মতো ভিডিও সার্ভিসেও আপলোড করতে পারেন।
HTML5 video এলিমেন্ট দিয়ে ভিডিও এম্বেড করা
আপনার HTML-এ MP4 ভিডিও দেখাতে হলে HTML5 <video> এলিমেন্ট ব্যবহার করতে হবে। সবচেয়ে সিম্পল ইমপ্লিমেন্টেশন এভাবে দেখাবে:
<video width="500" controls> <source src="path-to-your-video.mp4" type="video/mp4" /> </video>আপনি controls অ্যাট্রিবিউট রিমুভ করতে পারেন, কিন্তু আমি রিকমেন্ড করি না, কারণ এটিই ইউজারদের ভিডিও পজ/প্লে/রיוایند করতে দেয়।
500 ভ্যালু পিক্সেল ইউনিটে (500px)।
শুধু "path-to-your-video.mp4"-কে একটি রিয়েল MP4 সোর্স দিয়ে রিপ্লেস করুন, টেস্টের জন্য আপনি এটি ব্যবহার করতে পারেন (আমার একটি টিউটোরিয়াল থেকে)
https://res.cloudinary.com/techstacker/video/upload/f_auto/v1548698438/TechStacker/mac-drag-app-icon-to-dock.mp4আপনার ভিডিও প্লেয়ারের আকার (প্রস্থ/উচ্চতা) এডজাস্ট করা
আপনার ভিডিওর বর্তমান প্রস্থ ৫০০ পিক্সেল, আপনি এটাকে যেকোনো ভ্যালুতে চেঞ্জ করতে পারেন। আপনি যদি চান এটি রিলেটিভ স্পেসের ১০০% নেবে (যেখানে আপনার ভিডিও এলিমেন্টটি বসে) তবে সহজে এটাকে width="100%" করে দিন।
আপনি height ব্যবহার করে উচ্চতাও এডজাস্ট করতে পারেন। দুটো একসাথে ব্যবহারের উদাহরণ:
<video width="100%" height="400" controls> <source src="path-to-your-video.mp4" type="video/mp4" /> </video>ভিডিও অটোপ্লে করা (একবার)
আপনার MP4 ভিডিও একবার অটোপ্লে করতে হলে প্রথমবার ইউজার যখন ভিডিওর স্ক্রিনে দেখবে, ভিডিও এলিমেন্টে autoplay প্রপার্টি যোগ করুন:
<video width="500" controls autoplay> <source src="path-to-your-video.mp4" type="video/mp4" /> </video>অটোপ্লে কীভাবে কাজ করে
অটোপ্লে ফাংশনটি অটোমেটিক্যালি ট্রিগার হবে তখনই যখন ইউজারদের ভিডিও তাদের স্ক্রিনের ভিউপোর্টের ভিতরে আসবে।
ভিডিও লুপ করা
HTML5-এ আপনার MP4 ভিডিও লুপ (অনন্ত প্লে) করতে loop অ্যাট্রিবিউট ব্যবহার করুন:
<video width="500" controls autoplay loop> <source src="path-to-your-video.mp4" type="video/mp4" /> </video>নোট: controls অ্যাট্রিবিউট ইউজারকে পজ/স্টপ করতে দেয়, কিন্তু মনে রাখবেন লুপিং ভিডিও বিরক্তিকর হতে পারে, বিশেষ করে সাউন্ডসহ। লুপ অ্যাট্রিবিউট শুধু স펙িফিক ইউজ কেসে ব্যবহার করুন যেটা মেনিংফুল।
ব্রাউজার সাপোর্ট
পুরনো ডাইনোসর ব্রাউজারদের দিনগুলো почти শেষ। কিন্তু যেসব ব্রাউজার video এলিমেন্ট সাপোর্ট করে না, তাদের জন্য <video> ট্যাগের মাঝপথে কিছু টেক্সট যোগ করতে পারেন যাতে ইউজারদের জানানো যায়:
<video width="500" controls autoplay> <source src="path-to-your-video.mp4" type="video/mp4" /> Your browser is outdated, update it to display the video </video>টেক্সটটি শুধু পুরনো আউটডেটেড ব্রাউজারগুলোতে (Internet Explorer 9-এর নিচে) দেখাবে।
WebM MP4 ফলব্যাকসহ ব্যবহার করা
আপনার ভিডিওর WebM এবং MP4 উভয় ভার্সন থাকলে, নিচের কোড ব্যবহার করে WebM সাপোর্ট না করলে MP4-কে ফলব্যাক হিসেবে ব্যবহার করতে পারেন:
<video width="500" controls> <source src="path-to-your-video.webm" type="video/webm" /> <source src="path-to-your-video.mp4" type="video/mp4" /> </video>নোট: এখন পর্যন্ত শুধু Chrome এবং Opera ফুলি WebM সাপোর্ট করে, কিন্তু FireFox এবং Edge এটাকে ইমপ্লিমেন্ট করার ওপর কাজ করছে।
বোনাস টিপ
দ্রুত MP4 ভিডিও রেকর্ড করার জন্য এই ফ্রি টুলস ব্যবহার করতে পারেন:
- The Kap app (Mac)
- Icecream Screen Record (Windows)
ভিডিও ফ্রি আপলোড এবং স্টোর করার জন্য আমি Cloudinary রিকমেন্ড করি।
