الأكاديمية ← استخدام Hermesتوثيق رسمي · شرح عربي واضح

Hyperframes — Render MP4/WebM videos from HTML compositions

Hyperframes — Render MP4/WebM videos from HTML compositions

مبتدئ16 دقيقة3 أسئلة2026-08-09
الفكرة في دقيقة

ابدأ بالمعنى، ثم انتقل إلى التفاصيل.

هذا الدرس يشرح Hyperframes — Render MP4/WebM videos from HTML compositions ضمن موضوع بدء استخدام Hermes بصورة صحيحة. ستعرف ما الذي يفعله هذا الجزء، متى تحتاجه، وما أصغر خطوة آمنة للتأكد أنه يعمل.

إن كنت مبتدئًا

إن كنت جديدًا: لا تحفظ الأسماء. ركّز على ثلاثة أسئلة: ما المشكلة التي يحلها هذا الجزء؟ ما البيانات أو الصلاحيات التي يحتاجها؟ وكيف أعرف أن النتيجة صحيحة؟

للتطبيق العملي

للتطبيق: اقرأ المثال الأول، حدّد ما سيغيّره، نفّذه على بيانات تجريبية، ثم قارن الناتج بما وعد به المصدر.

للمتخصص

للمتخصص: راجع Skill metadata، Reference: full SKILL.md، When to Use، ثم افحص حالات الفشل والتوافق مع إصدارك.

ما الذي تحتاجه قبل البدء؟

لا تحتاج خبرة سابقة؛ اتبع الخطوات على جهاز تجريبي أولًا.

ماذا ستعرف؟

نتيجة واضحة قبل أن تقرأ.

  • تفهم Hyperframes — Render MP4/WebM videos from HTML compositions من دون افتراض معرفة سابقة.
  • تفرّق بين الوصف والمعلومة التي تحتاج إلى اختبار في بيئتك.
  • اقرأ الأمر الأول وحدد المدخلات والمخرجات قبل نسخه.
مصطلحات هذا الدرس

تعريفات قصيرة قبل التفاصيل.

Skill
حزمة تعليمات تعلّم Hermes طريقة عمل متكررة من دون إضافة خدمة خارجية بالضرورة.
وصف الصفحة الرسمي

Render MP4/WebM videos from HTML compositions

خريطة الموضوع

ما الذي يقوله المصدر، وبأي ترتيب؟

  1. 01
    Skill metadata

    ابدأ بهذا القسم لتفهم الفكرة أو البنية الأساسية.

  2. 02
    Reference: full SKILL.md

    اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.

  3. 03
    When to Use

    اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.

  4. 04
    Quick Reference

    اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.

  5. 05
    Setup (one-time)

    اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.

  6. 06
    Procedure

    اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.

  7. 07
    1. Plan before writing HTML

    اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.

  8. 08
    2. Scaffold

    اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.

  9. 09
    3. Layout before animation

    اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.

  10. 10
    4. Animate with GSAP

    اختم بهذا القسم لتفحص النتيجة والحالات الخاصة.

أمثلة من الصفحة الرسمية

انسخ بعد أن تفهم الأثر.

npx hyperframes init my-video # scaffold a project cd my-video npx hyperframes lint # validate before preview/render npx hyperframes preview # live-reload browser preview (port 3002) npx hyperframes render --output final.mp4 # render to MP4 npx hyperframes doctor # diagnose environment issues
bash "$(dirname "$(find ~/.hermes/skills -path '*/hyperframes/SKILL.md' 2>/dev/null | head -1)")/scripts/setup.sh"
npx hyperframes init my-video --non-interactive
تطبيق الآن

اقرأ الأمر الأول وحدد المدخلات والمخرجات قبل نسخه.

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

اختبار الفهم

ثلاثة قرارات قبل علامة الاكتمال.

1. ما المرجع النهائي عند تغيّر معلومات «شرح Hyperframes — Render MP4/WebM videos from HTML compositions»؟
2. ما أفضل طريقة لتطبيق هذا الدرس؟
3. ماذا تفعل قبل خطوة قد تعدّل ملفات أو حسابًا خارجيًا؟