close

ڈی پلیئر گائیڈ: ایم پی 4، ایچ ایل ایس، ایف ایل وی ویڈیوز کو ایمبیڈ اور کنفیگر کریں۔

DPlayer کیا ہے؟

DPlayer ایک طاقتور اور لچکدار اوپن سورس ویڈیو پلیئر ہے۔ یہ نہ صرف عام ویڈیو فارمیٹس جیسے MP4 کو سپورٹ کرتا ہے بلکہ HLS اور FLV اسٹریمز کو بھی ہینڈل کرتا ہے، جو اسے لائیو ویڈیو پلے بیک کے لیے مثالی بناتا ہے۔ DPlayer اپنے کم سے کم، حسب ضرورت انٹرفیس اور بلٹ ان "ڈینماکو"(تیرتے تبصرے) خصوصیت کے ساتھ نمایاں ہے۔

DPlayer استعمال کرنے کے لیے ایک تفصیلی گائیڈ

DPlayer استعمال کرنے کے لیے، آپ کو لائبریری اور کسی بھی ضروری انحصار کو ایمبیڈ کرنے کی ضرورت ہے، پھر پلیئر کو کنفیگر کریں۔

مرحلہ 1: ضروری لائبریریاں حاصل کریں۔

سی ڈی این کا استعمال ان لائبریریوں کو حاصل کرنے کا تیز ترین طریقہ ہے۔ اگر آپ ان کو اپنے صفحہ پر شامل کرتے ہیں تو 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>

مرحلہ 2: ایچ ٹی ایم ایل بنائیں اور پلیئر کو کنفیگر کریں۔

لائبریریوں کو سرایت کرنے کے بعد، آپ <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 سٹریم کو ہینڈل کرنے کے لیے عنصر سے منسلک کرتا ہے۔

ان خصوصیات کے ساتھ، آپ سادہ ویڈیوز سے لے کر لائیو سٹریمز تک، کسی بھی ضرورت کے لیے ایک طاقتور اور انتہائی حسب ضرورت ویڈیو پلیئر بنا سکتے ہیں۔