আজ আপনি <video> ব্যবহার করে HTML-এ MP4 ভিডিওগুলি দ্রুত এম্বেড করতে শিখবেন উপাদান আমি নিম্নলিখিতগুলি কভার করব:
- কিভাবে আপনার ভিডিও প্লেয়ারের আকার সামঞ্জস্য করবেন
- কিভাবে আপনার ভিডিও অটোপ্লে করবেন
- কিভাবে অসীমভাবে আপনার ভিডিও লুপ করবেন
বেশিরভাগ টিউটোরিয়াল ধারণাগুলি ব্যাখ্যা করার জন্য ছোট ভিডিওগুলির জন্য GIF ব্যবহার করে। আমি খুঁজে পেয়েছি যে MP4 এর গুণমান আরও ভাল, এবং কম জায়গা নেয়। MP4, WebM এর বিপরীতে, সমস্ত আধুনিক ব্রাউজারে কাজ করে এবং আপনি সেগুলি YouTube এর মত ভিডিও পরিষেবাতেও আপলোড করতে পারেন৷
HTML5 ভিডিও উপাদান সহ ভিডিও এম্বেড করুন
আপনার 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আপনার ভিডিও প্লেয়ারের আকার (প্রস্থ/উচ্চতা) সামঞ্জস্য করুন
আপনার ভিডিওটির বর্তমানে 500 পিক্সেল প্রস্থ রয়েছে, আপনি যে কোনো মান পরিবর্তন করতে পারেন। আপনি যদি এটি আপেক্ষিক স্থানের 100% নিতে চান (আপনার ভিডিও উপাদানটির ভিতরে যে ধারকটি বসে আছে) আপনি কেবল এটিকে 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 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>পাঠ্যটি শুধুমাত্র পুরানো পুরানো ব্রাউজারে দেখানো হবে (ইন্টারনেট এক্সপ্লোরার 9 এর নীচে)।
MP4 ফলব্যাকের সাথে WebM ব্যবহার করা
যদি আপনার ভিডিওর একটি WebM এবং MP4 সংস্করণ উভয়ই থাকে, তাহলে ফলব্যাক হিসাবে MP4 ব্যবহার করতে আপনি নিম্নলিখিত কোড ব্যবহার করতে পারেন, যদি আপনার ব্যবহারকারীদের ব্রাউজার WebM সমর্থন না করে:
<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 ভিডিও রেকর্ড করতে আপনি এই বিনামূল্যের টুলগুলি ব্যবহার করতে পারেন:
- দ্য ক্যাপ অ্যাপ (ম্যাক)
- আইসক্রিম স্ক্রীন রেকর্ড (উইন্ডোজ)
বিনামূল্যে আপনার ভিডিও আপলোড এবং সঞ্চয় করতে আমি ক্লাউডিনারি সুপারিশ করি৷
৷