close

डीप्लेअर मार्गदर्शक: एमपी४, एचएलएस, एफएलव्ही व्हिडिओ एम्बेड आणि कॉन्फिगर करा

डीप्लेअर म्हणजे काय?

DPlayer हा एक शक्तिशाली आणि लवचिक ओपन-सोर्स व्हिडिओ प्लेअर आहे. तो केवळ MP4 सारख्या सामान्य व्हिडिओ फॉरमॅटलाच समर्थन देत नाही तर HLS आणि FLV स्ट्रीम देखील हाताळतो, ज्यामुळे तो लाईव्ह व्हिडिओ प्लेबॅकसाठी आदर्श बनतो. 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 सह उदाहरण: त्याचप्रमाणे, हा कोड एक तयार करतो आणि FLV स्ट्रीम हाताळण्यासाठी घटकाशी flvPlayerजोडतो .<video>

या गुणधर्मांसह, तुम्ही साध्या व्हिडिओंपासून ते लाईव्ह स्ट्रीमपर्यंत कोणत्याही गरजेसाठी एक शक्तिशाली आणि अत्यंत सानुकूल करण्यायोग्य व्हिडिओ प्लेअर तयार करू शकता.