MooTools-এ video এবং audio এমবেড করা খুবই সহজ এবং এটি ওয়েব পেজের ইন্টারঅ্যাকটিভিটি এবং মাল্টিমিডিয়া কনটেন্ট প্রদর্শনের জন্য ব্যবহৃত হয়। আপনি MooTools ব্যবহার করে HTML5 ভিডিও এবং অডিও উপাদানকে কাস্টমাইজ এবং পরিচালনা করতে পারেন, যাতে আপনার ওয়েব পেজে উন্নত মাল্টিমিডিয়া ইন্টারঅ্যাকশন তৈরি হয়।
MooTools দিয়ে HTML5 Video এবং Audio Embed করা
১. HTML5 Video Embed করা
HTML5 ভিডিও এমবেড করা খুবই সহজ। HTML5 ভিডিও ট্যাগ ব্যবহার করে আপনি সরাসরি ওয়েব পেজে ভিডিও এমবেড করতে পারেন, এবং MooTools ব্যবহার করে ভিডিওটির কন্ট্রোল এবং প্লেব্যাক ম্যানিপুলেট করতে পারবেন।
উদাহরণ: HTML5 Video Embed
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Video Embed Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var videoElement = document.id('myVideo');
// ভিডিও প্লে বা পজিশন পরিবর্তন করার জন্য কাস্টম ফাংশন
$('playButton').addEvent('click', function() {
videoElement.play();
});
$('pauseButton').addEvent('click', function() {
videoElement.pause();
});
});
</script>
</head>
<body>
<!-- ভিডিও এমবেড -->
<video id="myVideo" width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
আপনার ব্রাউজার ভিডিও সমর্থন করে না।
</video>
<!-- কাস্টম প্লে এবং পজ বাটন -->
<button id="playButton">Play</button>
<button id="pauseButton">Pause</button>
</body>
</html>
এখানে:
<video>ট্যাগ ব্যবহার করে একটি ভিডিও এমবেড করা হয়েছে।- MooTools-এ
addEvent()ব্যবহার করে কাস্টম প্লে এবং পজ বাটন তৈরি করা হয়েছে, যা ভিডিও প্লেব্যাক নিয়ন্ত্রণ করবে।
২. HTML5 Audio Embed করা
HTML5 অডিও এমবেডও ভিডিও এমবেডের মতোই সহজ। আপনি অডিও ট্যাগ ব্যবহার করে সাউন্ড ফাইল এমবেড করতে পারেন এবং MooTools ব্যবহার করে সাউন্ডের প্লেব্যাক কন্ট্রোল করতে পারেন।
উদাহরণ: HTML5 Audio Embed
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Audio Embed Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var audioElement = document.id('myAudio');
// অডিও প্লে বা পজিশন পরিবর্তন করার জন্য কাস্টম ফাংশন
$('playButton').addEvent('click', function() {
audioElement.play();
});
$('pauseButton').addEvent('click', function() {
audioElement.pause();
});
});
</script>
</head>
<body>
<!-- অডিও এমবেড -->
<audio id="myAudio" controls>
<source src="audio.mp3" type="audio/mp3">
আপনার ব্রাউজার অডিও সমর্থন করে না।
</audio>
<!-- কাস্টম প্লে এবং পজ বাটন -->
<button id="playButton">Play</button>
<button id="pauseButton">Pause</button>
</body>
</html>
এখানে:
<audio>ট্যাগ ব্যবহার করে একটি অডিও এমবেড করা হয়েছে।- MooTools-এ
addEvent()ব্যবহার করে কাস্টম প্লে এবং পজ বাটন তৈরি করা হয়েছে, যা অডিও প্লেব্যাক নিয়ন্ত্রণ করবে।
MooTools দিয়ে Video এবং Audio এর প্লেব্যাক কন্ট্রোল
MooTools ব্যবহার করে আপনি ভিডিও এবং অডিওর প্লেব্যাক কন্ট্রোল খুব সহজেই করতে পারেন, যেমন প্লে, পজ, মিউট করা, ভলিউম পরিবর্তন করা ইত্যাদি। নিচে কিছু কাস্টম কন্ট্রোলের উদাহরণ দেওয়া হলো:
ভিডিও ভলিউম পরিবর্তন করা
window.addEvent('domready', function() {
var videoElement = document.id('myVideo');
// ভিডিও ভলিউম পরিবর্তন করার জন্য স্লাইডার
$('volumeSlider').addEvent('input', function() {
var volume = this.value / 100; // স্লাইডার মান 0 থেকে 1 এ রূপান্তরিত হবে
videoElement.volume = volume;
});
});
এখানে:
- একটি
volumeSliderতৈরি করা হয়েছে যা ভিডিওটির ভলিউম কন্ট্রোল করবে। - স্লাইডারের মান পরিবর্তন হলে ভিডিওটির ভলিউম পরিবর্তিত হবে।
অডিও ভলিউম পরিবর্তন করা
window.addEvent('domready', function() {
var audioElement = document.id('myAudio');
// অডিও ভলিউম পরিবর্তন করার জন্য স্লাইডার
$('volumeSlider').addEvent('input', function() {
var volume = this.value / 100; // স্লাইডার মান 0 থেকে 1 এ রূপান্তরিত হবে
audioElement.volume = volume;
});
});
এখানে:
- একটি
volumeSliderতৈরি করা হয়েছে যা অডিওর ভলিউম কন্ট্রোল করবে।
ভিডিও বা অডিও মিউট করা
window.addEvent('domready', function() {
var videoElement = document.id('myVideo');
// ভিডিও মিউট বা আনমিউট করা
$('muteButton').addEvent('click', function() {
videoElement.muted = !videoElement.muted; // মিউট করা বা আনমিউট করা
});
});
এখানে:
muteButtonব্যবহার করে ভিডিও বা অডিও মিউট করা বা আনমিউট করা হচ্ছে।
সারাংশ
MooTools দিয়ে আপনি HTML5 ভিডিও এবং অডিও উপাদান খুব সহজে এমবেড করতে এবং কাস্টম কন্ট্রোল (প্লে, পজ, মিউট, ভলিউম পরিবর্তন) তৈরি করতে পারবেন। addEvent() মেথডের মাধ্যমে আপনি কাস্টম ইন্টারঅ্যাকশন তৈরি করতে পারবেন, যেমন ভিডিও প্লে বা পজ করা, ভলিউম কন্ট্রোল করা, এবং মিউট করা। এর মাধ্যমে আপনি ব্যবহারকারীর জন্য একটি উন্নত মাল্টিমিডিয়া অভিজ্ঞতা তৈরি করতে পারবেন।
Read more
