close

كيفية استخدام JW Player: تضمين مقاطع الفيديو وتكوينها

ما هو JW Player؟

JW Player أداة قوية ومرنة لتشغيل مقاطع الفيديو على موقعك الإلكتروني. سيقدم هذا الدليل شرحًا تفصيليًا لكيفية استخدامه، بما في ذلك كيفية الحصول على المكتبة باستخدام شبكة توصيل المحتوى(CDN) أو تنزيلها.

كيفية الحصول على مكتبة JW Player

لديك خياران للحصول على مكتبة JW Player: استخدام CDN أو تنزيلها لاستضافتها محليًا.

1. استخدام شبكة توصيل المحتوى(مستحسن)

يُعد استخدام شبكة توصيل المحتوى(CDN) أسهل وأسرع طريقة لدمج JW Player. تُسهّل شبكة توصيل المحتوى تحميل الملفات لأنها مُستضافة على خوادم متعددة حول العالم.

لاستخدام شبكة توصيل المحتوى(CDN)، ما عليك سوى إضافة سطر التعليمات البرمجية التالي إلى <head>قسم موقعك الإلكتروني. ملاحظة: يجب استبداله <YOUR_LICENSE_KEY>بمفتاح الترخيص الحالي.

<script src="https://cdn.jwplayer.com/libraries/<YOUR_LICENSE_KEY>.js"></script>

2. التنزيل والاستضافة محليًا

إذا كنت تريد التحكم الكامل في الملفات ولا تريد الاعتماد على اتصال الشبكة، فيمكنك تنزيل JW Player واستضافته على الخادم الخاص بك.

  1. انتقل إلى الموقع الرسمي لـJW Player.

  2. قم بالتسجيل أو تسجيل الدخول إلى حسابك(تتوفر نسخة تجريبية مجانية).

  3. ابحث عن المكتبة وقم بتنزيلها من لوحة معلومات حسابك.

  4. قم بفك ضغط الملف وتحميل المجلد إلى الخادم الخاص بك.

دليل مفصل لاستخدام JW Player

بمجرد حصولك على المكتبة، يمكنك البدء في تضمين JW Player في موقع الويب الخاص بك.

1. إنشاء ملف HTML وتضمين JW Player

هذا مثال HTML كامل. إذا كنت تستخدم شبكة توصيل المحتوى(CDN)، فاستبدل <script src="...">السطر بكود شبكة توصيل المحتوى المذكور أعلاه. إذا كنت تستخدم المكتبة المُنزّلة، فتأكد من jwplayer.jsصحة مسار الملف.

<!DOCTYPE html>  
<html>  
<head>  
    <title>JW Player Example</title>  
    <script src="js/jwplayer.js"></script>  
</head>  
<body>  
  
    <h1>How to Use JW Player</h1>  
  
    <div id="video-container"></div>  
  
    <script>  
        // Initialize and configure JW Player  
        jwplayer("video-container").setup({  
            // The path to your video file  
            "file": "videos/my-video.mp4",  
              
            // The path to your video's thumbnail image  
            "image": "images/my-video-thumbnail.jpg",  
              
            // The dimensions of the player  
            "width": "640",  
            "height": "360",  
              
            // Autoplay the video when the page loads  
            "autostart": false,  
              
            // Show the player controls  
            "controls": true  
        });  
    </script>  
  
</body>  
</html>

2. شرح مفصل للكود

  • <script src="...">:يربط هذا السطر مكتبة JW Player بموقع الويب الخاص بك.

  • <div id="video-container"></div>هنا سيُعرض الفيديو. يمكنك اختيار أي اسم idتريده، ولكن تأكد من تطابقه مع الاسم المستخدم في jwplayer()الوظيفة.

  • jwplayer("video-container").setup({...}):هذا هو المكان الذي يمكنك فيه تهيئة JW Player وتكوينه.

    • "file":المسار إلى ملف الفيديو الخاص بك.

    • "image":المسار إلى صورة الفيديو المصغرة.

    • "width"و "height": يُحدِّد أبعاد المُشغِّل. يُمكنك استخدامه أيضًا "100%"لمُشغِّل مُتجاوب.

    • "autostart":قم بضبط هذا الخيار trueإذا كنت تريد تشغيل الفيديو تلقائيًا.

    • "controls":قم بضبط هذا الخيار falseإذا كنت تريد إخفاء عناصر التحكم في المشغل.

باستخدام هذا الدليل التفصيلي، يمكنك بسهولة البدء في استخدام JW Player لعرض مقاطع الفيديو على موقع الويب الخاص بك.