डीप्लेयर क्या है?
DPlayer एक शक्तिशाली और लचीला ओपन-सोर्स वीडियो प्लेयर है। यह न केवल MP4 जैसे सामान्य वीडियो फ़ॉर्मैट को सपोर्ट करता है, बल्कि HLS और FLV स्ट्रीम को भी हैंडल करता है, जो इसे लाइव वीडियो प्लेबैक के लिए आदर्श बनाता है। DPlayer अपने न्यूनतम, अनुकूलन योग्य इंटरफ़ेस और बिल्ट-इन "डैनमाकू"(फ़्लोटिंग कमेंट्स) फ़ीचर के साथ सबसे अलग है।
डीप्लेयर का उपयोग करने के लिए एक विस्तृत मार्गदर्शिका
डीप्लेयर का उपयोग करने के लिए, आपको लाइब्रेरी और किसी भी आवश्यक निर्भरता को एम्बेड करना होगा, फिर प्लेयर को कॉन्फ़िगर करना होगा।
चरण 1: आवश्यक लाइब्रेरी प्राप्त करें
इन लाइब्रेरीज़ को प्राप्त करने का सबसे तेज़ तरीका CDN का उपयोग करना है। यदि आप इन्हें अपने पृष्ठ पर शामिल करते हैं, तो DPlayer स्वचालित रूप से आश्रित लाइब्रेरीज़ का पता लगाएगा और उनका उपयोग करेगा।
MP4 के लिए(डिफ़ॉल्ट):
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>एचएलएस(.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>
चरण 2: 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: सीक बार के लिए थंबनेल स्प्राइट का पथ।
एचएलएस और एफएलवी के लिए गुण
इन वीडियो प्रकारों को कार्य करने के लिए बाहरी लाइब्रेरीज़ की आवश्यकता होती है। DPlayer स्वचालित रूप से इनका उपयोग करता है, लेकिन आप customTypeप्रॉपर्टी के माध्यम से इनके व्यवहार को अनुकूलित भी कर सकते हैं।
video.type: वीडियो प्रकार निर्दिष्ट करता है.'mp4': डिफ़ॉल्ट, छोड़ा जा सकता है.'hls':.m3u8वीडियो के लिए.'flv':.flvवीडियो के लिए.
video.customType: एक ऑब्जेक्ट जो आपको प्रत्येक वीडियो प्रकार के लिए प्रसंस्करण तर्क को अनुकूलित करने देता है।HLS के साथ उदाहरण: इसमें मौजूद कोड
customType.hlsएकHlsइंस्टेंस बनाता है और उसे DPlayer के<video>एलिमेंट से जोड़ता है। यह विशेष मामलों को संभालने या HLS स्ट्रीम पर अधिक नियंत्रण पाने के लिए उपयोगी है।FLV के साथ उदाहरण: इसी तरह, यह कोड एक बनाता है
flvPlayerऔर इसे<video>FLV स्ट्रीम को संभालने के लिए तत्व से जोड़ता है।
इन गुणों के साथ, आप साधारण वीडियो से लेकर लाइव स्ट्रीम तक, किसी भी आवश्यकता के लिए एक शक्तिशाली और अत्यधिक अनुकूलन योग्य वीडियो प्लेयर बना सकते हैं।