ডিপ্লেয়ার কী?
DPlayer একটি শক্তিশালী এবং নমনীয় ওপেন-সোর্স ভিডিও প্লেয়ার। এটি কেবল MP4 এর মতো সাধারণ ভিডিও ফর্ম্যাটগুলিকেই সমর্থন করে না বরং HLS এবং FLV স্ট্রিমগুলিও পরিচালনা করে, যা এটিকে লাইভ ভিডিও প্লেব্যাকের জন্য আদর্শ করে তোলে। DPlayer এর ন্যূনতম, কাস্টমাইজযোগ্য ইন্টারফেস এবং একটি অন্তর্নির্মিত "danmaku"(ভাসমান মন্তব্য) বৈশিষ্ট্যের জন্য আলাদা।
ডিপ্লেয়ার ব্যবহারের জন্য একটি বিস্তারিত নির্দেশিকা
DPlayer ব্যবহার করার জন্য, আপনাকে লাইব্রেরি এবং প্রয়োজনীয় নির্ভরতা এম্বেড করতে হবে, তারপর প্লেয়ারটি কনফিগার করতে হবে।
ধাপ ১: প্রয়োজনীয় লাইব্রেরিগুলি পান
এই লাইব্রেরিগুলি পাওয়ার দ্রুততম উপায় হল CDN ব্যবহার করা। আপনি যদি আপনার পৃষ্ঠায় নির্ভরশীল লাইব্রেরিগুলি অন্তর্ভুক্ত করেন তবে DPlayer স্বয়ংক্রিয়ভাবে সনাক্ত করবে এবং ব্যবহার করবে।
MP4(ডিফল্ট) এর জন্য:
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>HLS(.m3u8) এর জন্য:
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>FLV(.flv) এর জন্য:
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
ধাপ ২: HTML তৈরি করুন এবং প্লেয়ারটি কনফিগার করুন
লাইব্রেরিগুলি এম্বেড করার পরে, আপনি <div>ভিডিওটি প্রদর্শনের জন্য একটি উপাদান তৈরি করতে পারেন এবং তারপর নির্দিষ্ট বৈশিষ্ট্য সহ DPlayer কনফিগার করতে পারেন।
<!DOCTYPE html>
<html>
<head>
<title>Advanced DPlayer Example</title>
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
</head>
<body>
<h1>How to Use DPlayer</h1>
<div id="dplayer-container-1"></div>
<hr>
<div id="dplayer-container-2"></div>
<hr>
<div id="dplayer-container-3"></div>
<script>
// DPlayer configuration for MP4
const dpMP4 = new DPlayer({
container: document.getElementById('dplayer-container-1'),
autoplay: false,
lang: 'en',
loop: true,
hotkey: true,
preload: 'auto',
screenshot: true,
video: {
url: 'https://example.com/videos/my-video.mp4',
pic: 'https://example.com/images/my-video-thumbnail.jpg',
thumbnails: 'https://example.com/images/video-thumbnails.jpg',
type: 'mp4'
}
});
// DPlayer configuration for HLS
const dpHLS = new DPlayer({
container: document.getElementById('dplayer-container-2'),
autoplay: true,
lang: 'en',
theme: '#ff6666',
loop: false,
hotkey: true,
preload: 'metadata',
video: {
url: 'https://example.com/live/my-stream.m3u8',
type: 'hls',
customType: {
hls: function(video, player) {
const hls = new Hls();
hls.loadSource(video.src);
hls.attachMedia(video);
}
}
}
});
// DPlayer configuration for FLV
const dpFLV = new DPlayer({
container: document.getElementById('dplayer-container-3'),
autoplay: true,
lang: 'en',
theme: '#0077c2',
loop: false,
hotkey: true,
preload: 'auto',
video: {
url: 'https://example.com/live/my-stream.flv',
type: 'flv',
customType: {
flv: function(video, player) {
const flvPlayer = flvjs.createPlayer({
type: 'flv',
url: video.src,
});
flvPlayer.attachMediaElement(video);
flvPlayer.load();
}
}
}
});
</script>
</body>
</html>সম্পত্তির বিস্তারিত ব্যাখ্যা
সাধারণ বৈশিষ্ট্য(সকল ধরণের ভিডিওর জন্য প্রযোজ্য)
container: DOM উপাদান যেখানে DPlayer রেন্ডার করা হবে। প্রয়োজনীয়।autoplay:trueঅথবাfalse। পৃষ্ঠা লোড হলে স্বয়ংক্রিয়ভাবে ভিডিওটি চালায়।theme: হেক্স রঙের কোড(যেমন,'#FADFA3')। প্লেয়ারের অ্যাকসেন্ট রঙ সেট করে।lang: ব্যবহারকারীর ইন্টারফেস ভাষা, যেমন,'en'ইংরেজির জন্য।loop:trueঅথবাfalse। ভিডিওটি শেষ হওয়ার পরে লুপ করে।hotkey:trueঅথবাfalse। কীবোর্ড শর্টকাটগুলি সক্ষম করে(যেমন, প্লে/পজ করার জন্য স্পেসবার)।preload:'auto','metadata', অথবা'none'। ব্রাউজার কীভাবে ভিডিওটি প্রিলোড করে।'auto': সম্পূর্ণ ভিডিওটি প্রিলোড করে।'metadata': শুধুমাত্র মেটাডেটা(সময়কাল, মাত্রা) প্রিলোড করে।'none': কিছু প্রিলোড করে না।
screenshot:trueঅথবাfalse। ব্যবহারকারীদের ভিডিওর স্ক্রিনশট নিতে দেয়।video.url: আপনার ভিডিও ফাইলের পথ।video.pic: থাম্বনেইল ছবির পথ।video.thumbnails: সিক বারের জন্য একটি থাম্বনেইল স্প্রাইটের পথ।
HLS এবং FLV এর বৈশিষ্ট্যাবলী
এই ধরণের ভিডিওগুলির কাজ করার জন্য বহিরাগত লাইব্রেরি প্রয়োজন। DPlayer স্বয়ংক্রিয়ভাবে এগুলি ব্যবহার করে, তবে আপনি সম্পত্তির মাধ্যমে তাদের আচরণও কাস্টমাইজ করতে পারেন customType।
video.type: ভিডিওর ধরণ নির্দিষ্ট করে।'mp4': ডিফল্ট, বাদ দেওয়া যেতে পারে।'hls':.m3u8ভিডিওর জন্য।'flv':.flvভিডিওর জন্য।
video.customType: এমন একটি অবজেক্ট যা আপনাকে প্রতিটি ভিডিও ধরণের জন্য প্রক্রিয়াকরণ লজিক কাস্টমাইজ করতে দেয়।HLS এর উদাহরণ: এর মধ্যে থাকা কোডটি
customType.hlsএকটিHlsইনস্ট্যান্স তৈরি করে এবং এটি DPlayer এর<video>এলিমেন্টের সাথে সংযুক্ত করে। এটি বিশেষ কেস পরিচালনা করার জন্য বা HLS স্ট্রিমের উপর আরও নিয়ন্ত্রণ অর্জনের জন্য কার্যকর।FLV এর উদাহরণ: একইভাবে, এই কোডটি একটি তৈরি করে
flvPlayerএবং<video>FLV স্ট্রিম পরিচালনা করার জন্য এটিকে উপাদানের সাথে সংযুক্ত করে।
এই বৈশিষ্ট্যগুলির সাহায্যে, আপনি সাধারণ ভিডিও থেকে শুরু করে লাইভ স্ট্রিম পর্যন্ত যেকোনো প্রয়োজনে একটি শক্তিশালী এবং অত্যন্ত কাস্টমাইজযোগ্য ভিডিও প্লেয়ার তৈরি করতে পারেন।