إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    HTML الوسم <track>

    تعريفه

    نستخدم الوسم <track> على النحو التالي لإضافة ترجمة كتابية للملف الصوتي أو للفيديو المعروض في الصفحة.

    <track src="file-src" kind="for-what" srclang="lang" label="which-lang">	
    	

    • مكان الكلمة file-src نضع مسار الملف الذي يحتوي على الترجمة و الذي يفترض أن يكون نوعه vtt.
    • مكان الكلمة for-what نضع قيمة محددة لإعلام المتصفح كيف سيتم التعامل مع ملف الترجمة.
    • مكان الكلمة lang نضع أحرف مختصرة تشير لإسم اللغة التي سيتم عرض الترجمة بها.
    • مكان الكلمة which-lang نضع إسم لغة الترجمة التي سيراها المستخدم حتى يعرف بأي لغة الترجمة متوفرة.

    و بالطبع يمكن إضافة عدة وسوم <track> لنفس الفيديو أو الملف الصوتي لوضع عدة ترجمات يستطيع المستخدم اختيار ما يريده منها.

    دعم المتصفحات

    الجدول التالي يظهر المتصفحات التي تدعم الوسم <track>.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    23 12 31 12.1 6 مدعوم 25 31 ؟ 6 1.5

    خصائصه


    الخاصية default

    يمكن إضافتها للوسم لتحديد أنه الترجمة الإفتراضيى التي سيتم إعتمادها و بالطبع يظل المستخدم قادر على اختيار ترجمة أخرى.
    ملاحظة: يمكن إضافتها للوسم فقط في حال كانت الترجمة موضوعة لفيديو أو ملف صوتي يظهر أمام المستخدم.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    23 12 31 12.1 6 4.4 25 31 ؟ ؟ 1.5


    الخاصية kind

    يمكن إضافتها للوسم لجعل المتصفح يعرض الترجمة بشكل ملائم للمستخدم.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    23 12 31 12.1 6 4.4 25 31 ؟ ؟ 1.5

    يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية kind لتحديد كيف سيقوم المتصفح بعرض الترجمة للمستخدم.

    القيمة معناها
    subtitles هذه القيمة الإفتراضية و هي تعني أن الترجمة سيتم عرضها لكل ما يتم قوله في الفيديو أو لنص يظهر في الفيديو أو لإظهار نص بين مقاطع الفيديو إلخ..
    captions الترجمة سيتم عرضها لملف صوتي سواء كان هذا الملف عبارة عن حوار ما أو أغنية و هذا مناسب للمستخدم في حال كان أصم.
    chapters الترجمة سيتم عرضها لعنواين و هذا مناسب للعنواين الموضوعة التي تسمح بالتنقل إلى مقاطع محددةة في الفيديو.
    descriptions الترجمة سيتم عرضها لوصف ما يحدث في الفيديو و هذا مناسب للمستخدم في حال كان أعمى.
    metadata النص لن يتم عرضه أمام المستخدم حيث أنه عبارة عن سكربت الفيديو, أي ما تم قوله في الملف الصوتي أو الفيديو.


    الخاصية label

    يجب إضافتها للوسم لتحديد إسم لغة الترجمة الذي سيظهر أمام المستخدم و الذي يمكنه اختياره لعرض الترجمة به.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    23 12 31 12.1 6 4.4 25 31 ؟ ؟ 1.5


    الخاصية src

    يجب إضافتها للوسم لتحديد مسار الملف الذي يحتوي على الترجمة.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    23 12 31 12.1 6 4.4 25 31 ؟ ؟ 1.5


    الخاصية srclang

    يجب إضافتها للوسم لتحديد لغة الترجمة الموضوعة فيه.

    الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    23 12 31 12.1 6 4.4 25 31 ؟ ؟ 1.5

    إستخدامه

    في المثال التالي قمنا بعرض فيديو مع إضافة الترجمة له باللغتين العربية و الإنجليزية مع جعل الترجمة الإنجليزية هي الترجمة التي ستظهر بشكل إفتراضي عند تشغيل الفيديو.

    مثال

    <video width="320" height="240" src="who-am-i.mp4" controls>
    	<track kind="subtitles" label="العربية" src="ar.vtt" srclang="ar" default/>
    	<track kind="subtitles" label="English" src="en.vtt" srclang="en"/>
        Sorry, your browser doesn't support embedded videos.
    </video>
    		

    جرب الكود

    نصائح و ملاحظات

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

    00:00:04:000 --> 00:00:06.000
    Hello, my name is Mhamad Harmush
    
    00:00:07.000 --> 00:00:10.000
    In this lesson I'll teach you how
    to add tracks to videos
    	


    في حال أردت تعديل طريقة ظهور نص الترجمة, فيمكنك إضافة كود CSS بشكل مباشر في ملف الترجمة نفسه أو في الصفحة إذا أردت.

    مثال

    ::cue {
        background: none;
        color: papayawhip;
        font-size: 17px;
    }
    		

    جرب الكود

    إعلان

    Eqla3Tech.com

    شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

    لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات

    الدورات

    أدوات مساعدة

    الأقسام

    دورات
    مقالات أسئلة مشاريع كتب