استخراج ترجمة فيديو يوتيوب YouTube Data API

انشاء صفحة استخراج ترجمة فيديو يوتيوب باستخدام YouTube Data API
استخراج ترجمة فيديو يوتيوب باستخدام YouTube Data API

في هذا الموضوع، سنشرح كيفية بناء صفحة ويب تقوم باستخراج الترجمات من فيديوهات يوتيوب باستخدام YouTube Data API v3. هذا المشروع يتيح للمستخدم إدخال رابط فيديو من يوتيوب، واختيار لغة الترجمة المتاحة، ثم عرض الترجمة على الصفحة.

YouTube Subtitle Extractor

مكونات الكود الأساسية:

  • HTML: لإنشاء الهيكل العام للصفحة.
  • CSS: لتنسيق الصفحة.
  • JavaScript: لجلب الترجمة والتفاعل مع YouTube API.

أجزاء الكود:

1. هيكل HTML

الجزء التالي يوفر واجهة مستخدم بسيطة لإدخال رابط الفيديو، واختيار اللغة المتاحة، ثم عرض الترجمة:

<input type="text" id="youtubeUrl" placeholder="Enter YouTube video URL" />
<button onclick="getSubtitleLanguages()">Fetch Available Subtitles</button>
<select id="languageSelect" style="display:none;"></select>
<button id="extractButton" onclick="extractSubtitles()" style="display:none;">Extract Subtitles</button>
<div id="output"></div>

2. استخراج معرّف الفيديو

يتم استخراج معرّف الفيديو من رابط يوتيوب باستخدام التعبيرات النمطية (Regex):

function extractVideoId(url) {
    const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&]+)/;
    const matches = url.match(regex);
    return matches ? matches[1] : null;
}

3. جلب اللغات المتاحة للترجمة

يتم استخدام API لجلب قائمة الترجمات المتاحة:

async function getSubtitleLanguages() {
    const youtubeUrl = document.getElementById('youtubeUrl').value;
    const videoId = extractVideoId(youtubeUrl);

    if (!videoId) {
        alert('Invalid YouTube URL!');
        return;
    }

    const response = await fetch(
        `https://www.googleapis.com/youtube/v3/captions?part=snippet&videoId=${videoId}&key=${apiKey}`
    );
    const data = await response.json();

    if (!data.items || data.items.length === 0) {
        document.getElementById('output').innerHTML = '<p>No subtitles available for this video.</p>';
        return;
    }

    const languageSelect = document.getElementById('languageSelect');
    languageSelect.innerHTML = ''; 

    data.items.forEach(item => {
        const option = document.createElement('option');
        option.value = item.id;
        option.textContent = `${item.snippet.language} (${item.snippet.name})`;
        languageSelect.appendChild(option);
    });

    languageSelect.style.display = 'block';
    document.getElementById('extractButton').style.display = 'block';
}

4. استخراج الترجمة

async function extractSubtitles() {
    const captionId = document.getElementById('languageSelect').value;

    try {
        const response = await fetch(
            `https://www.googleapis.com/youtube/v3/captions/${captionId}?tfmt=ttml&key=${apiKey}`
        );
        const ttml = await response.text();
        const captions = parseTTML(ttml);
        displayCaptions(captions);
    } catch (error) {
        document.getElementById('output').innerHTML = `<p>Error: ${error.message}</p>`;
    }
}

5. تحليل وعرض الترجمة

يتم تحويل الترجمة من تنسيق TTML إلى نصوص مرتبة بالتوقيت:

function parseTTML(ttml) {
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(ttml, 'application/xml');
    return Array.from(xmlDoc.getElementsByTagName('p')).map(caption => ({
        time: caption.getAttribute('begin'),
        text: caption.textContent.trim()
    }));
}

function displayCaptions(captions) {
    const output = document.getElementById('output');
    output.innerHTML = ''; 

    captions.forEach(caption => {
        const div = document.createElement('div');
        div.classList.add('caption');
        div.innerHTML = `<strong>[${caption.time}]</strong> ${caption.text}`;
        output.appendChild(div);
    });
}

كيفية الاستخدام:

  • افتح الملف في متصفح الويب.
  • أدخل رابط فيديو من يوتيوب في الحقل المخصص.
  • اضغط على زر "Fetch Available Subtitles" لجلب الترجمات المتاحة.
  • اختر اللغة المطلوبة من القائمة المنسدلة.
  • اضغط على "Extract Subtitles" لعرض الترجمة.

خاتمة:

يوفر هذا المشروع طريقة فعالة لاستخراج الترجمات من فيديوهات يوتيوب باستخدام JavaScript و YouTube Data API. يمكن تطوير هذا الكود ليشمل ميزات إضافية مثل تحميل الترجمة كملف نصي.

  • نشرت
    1/1/25
  • مشاهدات الصفحة
    9

محتوى مميز

أحدث المواضيع

إحصائيات المنتدى

المواضيع
5,528
المشاركات
5,559
الأعضاء
4,873
آخر عضو مسجل
freexen

محتوى رائج

آخر المشاركات

عودة
أعلى