Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা ওয়েবসাইটে আধুনিক এবং ইউজার-বান্ধব ডিজাইন তৈরি করতে সহায়ক। এর মধ্যে video background এবং media controls তৈরি করার জন্য প্রস্তুতকৃত কনফিগারেশন এবং ফিচার রয়েছে, যা আপনার ওয়েবসাইটের ইন্টারফেসকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে। এখানে Materialize CSS ব্যবহার করে video background এবং media controls তৈরি করার পদ্ধতি বিস্তারিতভাবে আলোচনা করা হলো।
Video Background
Video background ওয়েবসাইটে খুবই জনপ্রিয় একটি ডিজাইন ফিচার যা ওয়েব পেজের ব্যাকগ্রাউন্ডে একটি ভিডিও প্লে করে। এটি ওয়েবসাইটের ভিজ্যুয়াল আকর্ষণ বৃদ্ধি করে এবং ব্যবহারকারীর মনোযোগ আকর্ষণ করে। Materialize CSS ব্যবহার করে সহজেই ভিডিও ব্যাকগ্রাউন্ড তৈরি করা যায়।
১. Video Background HTML স্ট্রাকচার
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Background Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<!-- Video Background -->
<div class="video-container">
<video autoplay loop muted>
<source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="section white">
<div class="row container">
<h1 class="header center teal-text text-lighten-2">Welcome to My Website</h1>
<p class="grey-text text-darken-3 lighten-3">This is a website with a video background.</p>
</div>
</div>
</body>
</html>
এখানে:
- video-container: এই ডিভের মাধ্যমে ভিডিওটি পুরো স্ক্রীনে সেন্টার করা হবে।
- autoplay: ভিডিও স্বয়ংক্রিয়ভাবে প্লে হবে।
- loop: ভিডিওটি লুপে চলবে।
- muted: ভিডিওতে সাউন্ড থাকবে না।
- source: ভিডিও ফাইলের পথ নির্ধারণ করা হয়েছে।
২. CSS Styling for Video Background
.video-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* Ensures the video stays in the background */
overflow: hidden;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: cover;
}
এখানে:
- position: fixed: ভিডিওটি স্ক্রীনে স্থির থাকবে।
- object-fit: cover: ভিডিওটি পুরো স্ক্রীনে ফিট করবে, কোনও অংশ কাটবে না।
Media Controls
Media controls হল একটি সেট কন্ট্রোল যা ব্যবহারকারীকে ভিডিও, অডিও বা অন্যান্য মিডিয়া উপাদান নিয়ন্ত্রণ করতে সাহায্য করে। Materialize CSS এর মাধ্যমে আপনি সহজে audio এবং video প্লেয়ার কন্ট্রোল তৈরি করতে পারেন, যা ব্যবহারকারীদের জন্য একটি ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব অভিজ্ঞতা প্রদান করে।
১. Video Player with Controls
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
এখানে:
- controls: এই অ্যাট্রিবিউটটি ভিডিও প্লেয়ারে প্রয়োজনীয় কন্ট্রোল (প্লে, পজ, ভলিউম, স্কিপ ইত্যাদি) প্রদর্শন করবে।
২. Audio Player with Controls
<audio controls>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
এখানে:
- controls: এটি অডিও প্লেয়ারকে কন্ট্রোলস প্রদান করবে, যেমন প্লে, পজ, ভলিউম ইত্যাদি।
৩. Customizing the Media Player with Materialize
Materialize CSS আপনাকে মিডিয়া প্লেয়ার কাস্টমাইজ করার জন্য সহজ কিছু স্টাইল দেয়, তবে আপনি নিজের CSS দিয়ে আরও কাস্টমাইজ করতে পারেন। যেমন, button, slider, volume control ইত্যাদি।
উদাহরণ:
<audio controls>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
এখানে:
- আপনি CSS দিয়ে audio প্লেয়ারের ডিফল্ট কন্ট্রোল স্টাইল পরিবর্তন করতে পারেন।
উপসংহার
Materialize CSS এর মাধ্যমে video background এবং media controls তৈরি করা অত্যন্ত সহজ। Video background আপনার ওয়েবসাইটকে আরও আকর্ষণীয় এবং ভিজ্যুয়ালি ইন্টারেস্টিং করে তোলে, যেখানে আপনি autoplay, loop, এবং muted এর মতো অপশন ব্যবহার করে ভিডিও কন্ট্রোল করতে পারেন। এছাড়া, media controls ভিডিও বা অডিও প্লেয়ারের কন্ট্রোল প্রদানের মাধ্যমে ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে। Materialize CSS ব্যবহার করে এইসব ফিচার খুব সহজে কাস্টমাইজ এবং ইমপ্লিমেন্ট করা যায়।
Read more
