close

دليل DPlayer: تضمين وتكوين مقاطع الفيديو بتنسيق MP4 وHLS وFLV

ما هو DPlayer؟

DPlayer مشغل فيديو قوي ومرن ومفتوح المصدر. يدعم صيغ الفيديو الشائعة مثل MP4، ويدعم أيضًا تدفقات HLS وFLV، مما يجعله مثاليًا لتشغيل الفيديو المباشر. يتميز DPlayer بواجهته البسيطة والقابلة للتخصيص، وميزة "danmaku"(التعليقات العائمة) المدمجة.

دليل مفصل لاستخدام DPlayer

لاستخدام DPlayer، تحتاج إلى تضمين المكتبة وأي تبعيات ضرورية، ثم تكوين المشغل.

الخطوة 1: الحصول على المكتبات الضرورية

يُعد استخدام شبكة توصيل المحتوى(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>

الخطوة 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:المسار إلى الصورة المصغرة لشريط البحث.

خصائص HLS وFLV

تتطلب أنواع الفيديو هذه مكتبات خارجية لتعمل. يستخدمها DPlayer تلقائيًا، ولكن يمكنك أيضًا تخصيص سلوكها عبر customTypeالخاصية.

  • video.type:يحدد نوع الفيديو.

    • 'mp4':افتراضي، يمكن حذفه.

    • 'hls':للفيديوهات .m3u8.

    • 'flv':للفيديوهات .flv.

  • video.customType:كائن يسمح لك بتخصيص منطق المعالجة لكل نوع من أنواع الفيديو.

    • مثال مع HLS: customType.hls يُنشئ الكود الموجود بداخله Hlsمثيلًا ويربطه بعنصر DPlayer <video>. هذا مفيد للتعامل مع الحالات الخاصة أو لزيادة التحكم في تدفق HLS.

    • مثال مع FLV: وبالمثل، يقوم هذا الكود بإنشاء ملف FLV flvPlayerوربطه بالعنصر <video>للتعامل مع تدفق FLV.

باستخدام هذه الخصائص، يمكنك إنشاء مشغل فيديو قوي وقابل للتخصيص بدرجة كبيرة لأي احتياج، بدءًا من مقاطع الفيديو البسيطة وحتى البث المباشر.