إنشاء صفحة ويب تحتوي على مشغل فيديو يستخدم JW Player

لإنشاء صفحة ويب تحتوي على مشغل فيديو يستخدم JW Player، يمكنك دمج HTML وCSS وJavaScript في ملف واحد. سأوضح لك كيفية إعداد مشغل فيديو من JW Player، بما في ذلك CSS لتنسيق النص، وجافا سكريبت لتضمين المشغل، وHTML للهيكل الأساسي.

إعداد JW Player

أولاً، تحتاج إلى تسجيل حساب في [JW Player](https://www.jwplayer.com/) والحصول على مفتاح API أو رمز التضمين.

كود HTML مع CSS وجافا سكريبت JW Player

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مشغل فيديو JW Player</title>
    <style>
        /* إضافة CSS لتنسيق النص قبل مشغل الفيديو */
        .jw-media.jw-reset {
            position: relative; /* تأكد من أن العنصر يحتوي على موضع */
            width: 640px; /* عرض المشغل */
            height: 360px; /* ارتفاع المشغل */
            margin: auto; /* توسيط العنصر */
        }
        .jw-media.jw-reset:before {
            content: "شاهدة جمبع المباريات على دامي سبورت"; /* النص الذي سيتم إضافته */
            color: #fff; /* لون النص */
            font-size: 18px; /* حجم النص */
            position: absolute; /* استخدام الموضع المطلق لتحديد الموقع بدقة */
            top: 20px; /* المسافة من أعلى العنصر */
            left: 20px; /* المسافة من يسار العنصر لضبط الموقع */
            background: rgba(0, 0, 0, 0.5); /* خلفية نصية نصف شفافة */
            padding: 5px; /* تباعد حول النص */
            border-radius: 5px; /* زوايا دائرية للنص */
        }
    </style>
</head>
<body>
    <div id="my-video" class="jw-media jw-reset"></div>
    
    
    <script src="https://cdn.jwplayer.com/libraries/YOUR_LIBRARY_KEY.js"></script>
    <script>
        // تهيئة مشغل JW Player
        jwplayer("my-video").setup({
            file: "https://content.jwplatform.com/videos/your-video.mp4", // رابط الفيديو
            width: "100%",
            aspectratio: "16:9",
            autostart: false
        });
    </script>
</body>
</html>

شرح السكريبت كود

1. HTML:
- `<div id="my-video" class="jw-media jw-reset"></div>`: عنصر لتضمين مشغل الفيديو.

2. CSS:
- `.jw-media.jw-reset`: يحدد موقع وحجم مشغل الفيديو.
- `.jw-media.jw-reset:before`: يضيف نصًا فوق مشغل الفيديو، مع تنسيق مناسب.

3. JavaScript:
- `jwplayer("my-video").setup({ ... });`: يهيئ مشغل الفيديو باستخدام مكتبة JW Player ويحدد إعدادات الفيديو مثل الرابط والعرض ونسبة العرض إلى الارتفاع.

ملاحظات

- **استبدل `YOUR_LIBRARY_KEY`** بمفتاح المكتبة الخاص بك من JW Player.

- **استبدل `https://content.jwplatform.com/videos/your-video.mp4`** برابط الفيديو الخاص بك.

يمكنك نسخ هذا الكود إلى ملف HTML وفتحه في متصفح الويب لمعاينة مشغل الفيديو والتنسيق النصي.

JW PLAYER معاينة

إنشاء صفحة ويب تحتوي على مشغل فيديو يستخدم JW Player

HTML

CSS

JAVA

إنشاء صفحة ويب تحتوي على مشغل فيديو يستخدم JW Player

إنشاء صفحة ويب تحتوي على مشغل فيديو يستخدم JW Player

إعداد JW Player

كود HTML مع CSS وجافا سكريبت JW Player

شرح السكريبت كود

ملاحظات

JW PLAYER معاينة

سكريبت أدوات متكاملة لتحرير النصوص وإدارتها بسهولة

دليل شامل حول PlayStation Plus

الصفحات

GPLDROID

#buttons=(Accept !) #days=(20)

Contact form