DPlayer भनेको के हो?
DPlayer एक शक्तिशाली र लचिलो खुला स्रोत भिडियो प्लेयर हो। यसले MP4 जस्ता सामान्य भिडियो ढाँचाहरूलाई मात्र समर्थन गर्दैन तर HLS र FLV स्ट्रिमहरूलाई पनि ह्यान्डल गर्दछ, जसले गर्दा यो प्रत्यक्ष भिडियो प्लेब्याकको लागि आदर्श हो। DPlayer यसको न्यूनतम, अनुकूलन योग्य इन्टरफेस र निर्मित "danmaku"(फ्लोटिंग टिप्पणीहरू) सुविधाको साथ फरक देखिन्छ।
DPlayer प्रयोग गर्ने बारे विस्तृत गाइड
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 सँग उदाहरण: त्यसैगरी, यो कोडले an सिर्जना गर्दछ र FLV स्ट्रिम ह्यान्डल गर्न तत्वमा
flvPlayerसंलग्न गर्दछ ।<video>
यी गुणहरूको साथ, तपाईंले साधारण भिडियोदेखि लाइभ स्ट्रिमहरू सम्म, कुनै पनि आवश्यकताको लागि शक्तिशाली र अत्यधिक अनुकूलन योग्य भिडियो प्लेयर सिर्जना गर्न सक्नुहुन्छ।