إنشاء مشغل IPTV باستخدام HTML و CSS وجافا سكريبت

gpldroid
persongpldroid

إنشاء مشغل IPTV باستخدام HTML و CSS وجافا سكريبت


مشغل web iptv

في عصرنا الرقمي، أصبح الوصول إلى محتوى الفيديو المتنوع عبر الإنترنت أسهل من أي وقت مضى. واحدة من الطرق الشائعة لمتابعة قنوات التلفاز عبر الإنترنت هي باستخدام تقنية IPTV.

 في هذا المقال، سنستعرض كيفية إنشاء مشغل IPTV بسيط باستخدام HTML، CSS، وجافا سكريبت، وكيفية دمج هذا المشغل في مدونة بلوجر.


 ما هو IPTV؟

IPTV هو اختصار لـ "Internet Protocol Television"، وهو نظام يتيح لك مشاهدة قنوات التلفاز عبر الإنترنت بدلاً من استخدام وسائل البث التقليدية. يمكن أن يكون هذا مفيدًا إذا كنت ترغب في الوصول إلى مجموعة متنوعة من القنوات من جميع أنحاء العالم.


 كيفية إنشاء مشغل IPTV

1. بناء الهيكل الأساسي باستخدام HTML

الهيكل الأساسي لمشغل IPTV يتضمن عنصر فيديو وقائمة من القنوات.

فيما يلي الشيفرة الأساسية لصفحة HTML الخاصة بمشغل IPTV:


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IPTV Player</title>
    <style>
        /* CSS Styles هنا */
    </style>
</head>
<body>
    <div class="container1">
        <header>
            <h1>IPTV Player</h1>
            <button class="dropdown-btn">Select Channel</button>
        </header>
        <video controls id="videoPlayer">
            Your browser does not support the video tag.
        </video>
        <div class="channel-list" id="channelList"></div>
    </div>

    <script>
        // JavaScript هنا
    </script>
</body>
</html>
```

2. تنسيق المظهر باستخدام CSS

لتحسين تجربة المستخدم، يمكننا استخدام CSS لتنسيق مشغل الفيديو وقائمة القنوات. الشيفرة التالية توضح كيفية تنسيق العناصر:


```css
#body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container1 {
    width: 100%;
    max-width: 600px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: auto;
}
header {
    padding: 20px;
    text-align: center;
}
.dropdown-btn {
    background-color: #fff;
    color: #4CAF50;
    padding: 10px 20px;
    font-size: 16px;
    border: 2px solid #4CAF50;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, color 0.3s;
}
.dropdown-btn:hover {
    background-color: #4CAF50;
    color: #fff;
}
video {
    display: block;
    width: 100%;
    height: 400px;
    margin: 0 auto;
}
.channel-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    justify-content: center;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
}
.channel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    border: 2px solid #ddd;
    border-radius: 10px;
    background: #fff;
    width: 80px;
    height: 80px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}
.channel-item img {
    width: 60%;
    height: 50%;
    object-fit: cover;
}
.channel-item span {
    padding: 5px;
    text-align: center;
    font-size: 14px;
}
.channel-item:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
```

 3. إضافة الوظائف باستخدام جافا سكريبت

تقوم جافا سكريبت بتحميل قائمة القنوات من ملف M3U وعرضها على الصفحة. بالإضافة إلى ذلك، تتيح للمستخدمين تشغيل القناة التي يختارونها. إليك كيفية تنفيذ ذلك:


```javascript
document.addEventListener('DOMContentLoaded', () => {
    const videoPlayer = document.getElementById('videoPlayer');
    const channelList = document.getElementById('channelList');

    const m3uUrl = 'https://iptv-org.github.io/iptv/languages/ara.m3u';

    const fetchChannels = async () => {
        try {
            const response = await fetch(m3uUrl);
            const data = await response.text();
            const lines = data.split('\n');
            const channels = [];
            let channel = {};

            lines.forEach(line => {
                if (line.startsWith('#EXTINF')) {
                    const nameMatch = line.match(/tvg-name="([^"]+)"/);
                    const logoMatch = line.match(/tvg-logo="([^"]+)"/);
                    
                    channel = {
                        name: nameMatch ? nameMatch[1] : 'Unknown',
                        logo: logoMatch ? logoMatch[1] : '',
                        url: null
                    };
                } else if (line.startsWith('http')) {
                    if (channel) {
                        channel.url = line;
                        channels.push(channel);
                    }
                }
            });

            channels.forEach(channel => {
                const channelItem = document.createElement('a');
                channelItem.href = '#';
                channelItem.className = 'channel-item';
                channelItem.innerHTML = `
                    ${channel.logo ? `<img src="${channel.logo}" alt="${channel.name}"/>` : `<div style="width: 100%; height: 70%; background: #ddd;"/>`}
                    <span>${channel.name}</span>
                `;
                channelItem.addEventListener('click', (e) => {
                    e.preventDefault();
                    videoPlayer.src = channel.url;
                });
                channelList.appendChild(channelItem);
            });
        } catch (error) {
            console.error('Error fetching M3U playlist:', error);
        }
    };

    fetchChannels();
});
```

كيفية استخدام الكود في مدونة بلوجر


1. اولا وقبل كل شيء قم بفتح لوحة التحكم في بلوجر:

 قم بتسجيل الدخول إلى حسابك في بلوجر واذهب إلى لوحة التحكم الخاصة بالمدونة.

2. إنشاء مشاركة جديدة: 

اختر "مشاركة جديدة" لبدء كتابة مقال جديد.

3. التبديل إلى وضع HTML: 

في محرر المقالات، انتقل إلى وضع HTML بدلاً من وضع "المصدر".

4. نسخ الشيفرة:

 انسخ الشيفرة التي قدمناها أعلاه وألصقها في محرر HTML.

5. نشر المقال: 

بعد التأكد من تنسيق الكود بشكل صحيح، يمكنك نشر المقال.

باستخدام هذه الخطوات، يمكنك دمج مشغل IPTV الخاص بك في مدونتك على بلوجر، مما يسمح لزوارك بمشاهدة قنوات IPTV مباشرة من موقعك.

Example IPTV web Player

Tags

عرض المزيد

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

يستخدم موقعنا ملفات تعريف الارتباط لتحسين تجربتك. . تحقق الآن
Accept !
مشاركة في التطبيقات الأخرى
Copy Post Link