تعرف على كيفية تضمين مقاطع الفيديو في صفحات الويب وإدراج ملفات FLV في Dreamweaver.

تضمين ملفات فيديو في صفحات الويب (HTML5)

يدعم HTML5 علامات الفيديو والصوت التي تتيح للمستخدمين تشغيل ملفات فيديو وصوت في المستعرضات، دون الحاجة إلى مكون إضافي أو مشغّل خارجي. ويدعم Dreamweaver تلميحات التعليمات البرمجية لإضافة علامات فيديو أو صوت.

تعرض طريقة العرض Live View الفيديو، مما يوفر معاينة للفيديو الذي تقوم بتضمينه داخل صفحة الويب.

ملاحظة:

على الرغم من إمكانية تضمين أي ملف فيديو في صفحة الويب، لا تعرض Live View دائمًا جميع ملفات الفيديو. ويتم دعم علامات الصوت والفيديو في Dreamweaver باستخدام المكون الإضافي Apple QuickTime. في نظام التشغيل Windows، إذا لم يتم تثبيت المكون الإضافي Apple QuickTime، فلن تعرض صفحة الويب محتوى الوسائط.

لمعرفة كيفية إدراج فيديو HTML5، راجع إدراج مقاطع فيديو HTML5 في Dreamweaver.

إدراج ملفات FLV

إدراج ملفات FLV

يمكنك إضافة فيديو بتنسيق FLV بسهولة إلى صفحات الويب دون استخدام أداة التأليف Flash. ويجب أن يتوفر لديك ملف FLV تم ترميزه قبل البدء.

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

ملف FLV المحدد ومجموعة عناصر تحكم التشغيل
ملف FLV المحدد ومجموعة عناصر تحكم التشغيل

يوفر لك Dreamweaver الخيارات التالية لتقديم فيديو FLV إلى الزائرين لموقعك:

Progressive Download Video

يقوم بتنزيل ملف FLV على القرص الثابت لزائر موقعك ثم تشغيله. وعلى عكس طرق "التنزيل والتشغيل" التقليدية لتقديم الفيديو، يتيح التنزيل المتتالي بدء تشغيل ملف الفيديو قبل اكتمال التنزيل.

Streaming Video

يعمل على دفق محتوى الفيديو وتشغيله على صفحة الويب بعد فترة تخزين مؤقت قصيرة لضمان التشغيل بسلاسة. لتمكين تدفق الفيديو على صفحات الويب، يجب أن تتمتع بإمكانية الوصول إلى Adobe® Flash® Media Server.

يجب أن يتوفر لديك ملف FLV تم ترميزه قبل التمكن من استخدامه في Dreamweaver. يمكنك إدراج ملفات فيديو تم إنشاؤها باستخدام نوعين من برامج الترميز (تقنيات الضغط/إلغاء الضغط): Sorenson Squeeze وOn2.

كما هو الحال مع ملفات SWF العادية، عندما تقوم بإدراج ملف FLV، يقوم Dreamweaver بإدراج تعليمة برمجية تكتشف ما إذا كان لدى المستخدم الإصدار الصحيح من Flash Player لعرض الفيديو أم لا. وإذا لم يكن لدى المستخدم الإصدار الصحيح، تعرض الصفحة محتوى بديلاً يطالب المستخدم بتنزيل أحدث إصدار من Flash Player.

ملاحظة:

لعرض ملفات FLV، يجب أن يتوفر لدى المستخدمين برنامج Flash Player 8 أو إصدار أحدث مثبتًا على أجهزة الكمبيوتر. وإذا لم يكن لدى المستخدم الإصدار المطلوب من Flash Player وتم تثبيته على الكمبيوتر، ولكن لديه Flash Player 6.0 r65 أو إصدار أحدث، فسوف يعرض المستعرض المثبِّت السريع لبرنامج Flash Player بدلاً من المحتوى البديل. وإذا رفض المستخدم التثبيت السريع، فسوف تعرض الصفحة المحتوى البديل.

للحصول على مزيد من المعلومات حول العمل باستخدام الفيديو، تفضل بزيارة Video Technology Center على www.adobe.com/go/flv_devcenter_ae.

إدراج ملف FLV

  1. حدد Insert > HTML > Flash Video.

    إدراج فيديو Flash
    إدراج فيديو Flash

  2. في مربع الحوار Insert FLV، حدد Progressive Download أو Streaming Video من القائمة المنبثقة Video Type.
  3. أكمل بقية خيارات مربع الحوار وانقر فوق OK.

ملاحظة:

لا يقوم Microsoft Internet Information Server ‏(IIS) بمعالجة علامات الكائنات المتداخلة. وبالنسبة لصفحات ASP، يستخدم Dreamweaver التعليمات البرمجية object/embed المتداخلة بدلاً من التعليمات البرمجية object المتداخلة عند إدراج ملفات SWF أو FLV.

تعيين خيارات فيديو التنزيل المتتالي

يتيح لك مربع الحوار Insert FLV إمكانية تعيين الخيارات لتسليم التنزيل المتتالي لملف FLV تم إدراجه في صفحة ويب.

  1. حدد Insert > HTML > Flash Video (أو انقر فوق أيقونة Flash Video بفئة HTML في لوحة Insert).

  2. في مربع الحوار Insert FLV، حدد Progressive Download Video من القائمة Video Type.
    إدراج فيديو Flash
    إدراج فيديو Flash

  3. حدد الخيارات التالية:

    URL

    يحدد مسار نسبي أو مطلق إلى ملف FLV. لتحديد مسار نسبي (على سبيل المثال، mypath/myvideo.flv)، انقر فوق الزر Browse، وانتقل إلى ملف FLV، ثم حدده. لتحديد مسار مطلق، اكتب عنوان URL (على سبيل المثال، http://www.example.com/myvideo.flv) لملف FLV.

    Skin

    يحدد مظهر مكون الفيديو. وتظهر معاينة للسطح المحدد أسفل القائمة المنبثقة Skin.

    Width

    عرض ملف FLV بالبكسل. يحدد Dreamweaver عرض ملف FLV ويمكنك مشاهدة العرض الذي يظهر تلقائيًا في هذا الحقل.

    Height

    ارتفاع ملف FLV بالبكسل. يحسن Dreamweaver ارتفاع ملف FLV تلقائيًا، ويمكنك مشاهدة الارتفاع وهو يظهر تلقائيًا في هذا الحقل.

    ملاحظة:

    يشير الخيار Total With Skin إلى عرض ملف FLV وارتفاعه بالإضافة إلى عرض السطح المحدد وارتفاعه.

    Constrain

    يحافظ على نفس نسبة العرض إلى الارتفاع بين عرض مكون الفيديو وارتفاعه. يكون هذا الخيار محددًا بشكل افتراضي.

    Auto Play

    يحدد ما إذا كان سيتم تشغيل الفيديو عند فتح صفحة الويب أم لا.

    Auto Rewind

    يحدد ما إذا كان ستتم إعادة عنصر التحكم بالتشغيل إلى موضع البدء بعد انتهاء تشغيل الفيديو أم لا.

  4. انقر فوق OK لإغلاق مربع الحوار وإضافة ملف FLV إلى صفحة الويب.

    يقوم الأمر Insert FLV بإنشاء ملف مشغل فيديو بتنسيق SWF وملف للسطح بتنسيق SWF ليتم استخدامهما في عرض محتوى الفيديو على الويب. (لرؤية الملفات الجديدة، قد تحتاج إلى النقر فوق الزر Refresh في اللوحة Files). ويتم تخزين هذه الملفات في نفس الدليل كملف HTML الذي تضيف إليه محتوى الفيديو. عندما تقوم بتحميل صفحة HTML تحتوي على ملف FLV، يقوم Dreamweaver بتحميل هذه الملفات كملفات تابعة (طالما نقرت فوق Yes في مربع الحوار Put Dependent Files).

تعيين خيارات تدفق الفيديو

يتيح لك مربع الحوار Insert FLV إمكانية تعيين الخيارات لتنزيل تدفق الفيديو لملف FLV تم إدراجه في صفحة ويب.

  1. حدد Insert > HTML > Flash Video (أو انقر فوق أيقونة Flash Video بفئة HTML في لوحة Insert).

  2. حدد Streaming Video من القائمة المنبثقة Video Type.
    تعيين خيارات تدفق الفيديو
    تعيين خيارات تدفق الفيديو

    Server URI

    يحدد اسم الخادم واسم التطبيق واسم المثيل بالشكل rtmp://www.example.com/app_name/instance_name.

    Stream Name

    يحدد اسم ملف FLV الذي تريد تشغيله (على سبيل المثال، myvideo.flv). ويعد الامتداد ‎.flv اختياريًا.

    Skin

    يحدد مظهر مكون الفيديو. وتظهر معاينة للسطح المحدد أسفل القائمة المنبثقة Skin.

    Width

    عرض ملف FLV بالبكسل. يحدد Dreamweaver عرض ملف FLV file، ويملأ العرض في هذا الحقل تلقائيًا.

    Height

    ارتفاع ملف FLV بالبكسل. يحدد Dreamweaver ارتفاع ملف FLV ويملأ الارتفاع بالبكسل تلقائيًا في هذا الحقل.

    ملاحظة:

    يشير الخيار Total With Skin إلى عرض ملف FLV وارتفاعه بالإضافة إلى عرض السطح المحدد وارتفاعه.

    Constrain

    يحافظ على نفس نسبة العرض إلى الارتفاع بين عرض مكون الفيديو وارتفاعه. يكون هذا الخيار محددًا بشكل افتراضي.

    Live Video Feed

    يحدد ما إذا كان مكون الفيديو مباشرًا أم لا. إذا تم تحديد Live Video Feed، يقوم Flash Player بتشغيل نقل الفيديو المباشر المتدفق من Flash® Media Server. واسم نقل الفيديو المباشر هو الاسم المحدد في مربع النص Stream Name.

    ملاحظة:

    لتمكين Live Video Feed، يجب عليك تحديد أحد خيارات سطح Halo من حقل Skin. عندما تحدد Live Video Feed، تظهر عناصر التحكم بالصوت فقط على سطح المكون، وذلك لأنه لا يمكنك معالجة الفيديو المباشر. علاوة على ذلك، لا يؤثر الخياران Auto Play وAuto Rewind مطلقًا على الفيديو.

    Auto Play

    يحدد ما إذا كان سيتم تشغيل الفيديو عند فتح صفحة الويب أم لا.

    Auto Rewind

    يحدد ما إذا كان ستتم إعادة عنصر التحكم بالتشغيل إلى موضع البدء بعد انتهاء تشغيل الفيديو أم لا.

    Buffer Time

    يحدد الوقت، بالثواني، المطلوب للتخزين المؤقت قبل بدء تشغيل الفيديو. ويتم تعيين وقت التخزين المؤقت الافتراضي على 0، ومن ثم يبدأ تشغيل الفيديو على الفور بعد النقر فوق الزر Play. (إذا تم تحديد Auto Play، يبدأ تشغيل الفيديو متى يتم إنشاء الاتصال مع الخادم). قد ترغب في تعيين وقت التخزين المؤقت إذا كنت تقوم بتسليم فيديو ذي معدل بت أعلى من سرعة الاتصال لدى زائر الموقع، أو عند احتمال تسبب نقل البيانات عبر الإنترنت في حدوث مشاكل في النطاق الترددي أو الاتصال. على سبيل المثال، إذا أردت إرسال 15 ثانية من الفيديو إلى صفحة الويب قبل أن تبدأ صفحة الويب تشغيل الفيديو، فقم بتعيين زمن التخزين المؤقت على 15.

  3. انقر فوق OK لإغلاق مربع الحوار وإضافة ملف FLV إلى صفحة الويب.

    يقوم الأمر Insert FLV بإنشاء ملف مشغل فيديو بتنسيق SWF وملف للسطح بتنسيق SWF ليتم استخدامهما في عرض الفيديو على صفحة الويب. كما يقوم الأمر بإنشاء ملف main.asc يجب تحميله إلى Flash Media Server. (لرؤية الملفات الجديدة، قد تحتاج إلى النقر فوق الزر Refresh في اللوحة Files). ويتم تخزين هذه الملفات في نفس الدليل كملف HTML الذي تضيف إليه محتوى الفيديو. عندما تقوم بتحميل صفحة HTML التي تحتوي على الملف FLV، لا تنسَ تحميل ملفات SWF إلى خادم الويب الخاص بك، وتحميل الملف main.asc إلى Flash Media Server.

    ملاحظة:

    إذا كان لديك ملف main.asc بالفعل على الخادم، فراجع مسؤول الخادم قبل تحميل الملف main.asc الذي تم إنشاؤه بواسطة الأمر Insert FLV.

    يمكنك تحميل جميع ملفات الوسائط المطلوبة بسهولة عن طريق تحديد العنصر النائب لمكون الفيديو في النافذة Dreamweaver Document، والنقر فوق الزر Upload Media في عارض الخصائص (Window > ‏Properties). للاطلاع على قائمة بالملفات المطلوبة، انقر فوق Show required files.

    ملاحظة:

    لا يؤدي النقر فوق الزر Upload Media إلى تحميل ملف HTML الذي يحتوي على محتوى الفيديو.

تحرير معلومات تنزيل Flash Player

عند إدراج ملف FLV في صفحة، يقوم Dreamweaver بإدراج تعليمة برمجية تكتشف ما إذا كان لدى المستخدم الإصدار الصحيح من Flash Player أم لا. وإذا لم يكن لديه الإصدار الصحيح، تعرض الصفحة محتوى بديلاً افتراضيًا يطالب المستخدم بتنزيل أحدث إصدار من Flash Player. ويمكنك تغيير هذا المحتوى البديل في أي وقت.

ينطبق هذا الإجراء أيضًا على ملفات SWF.

ملاحظة:

إذا لم يكن لدى المستخدم الإصدار المطلوب، ولكن لديه Flash Player 6.0 r65 أو إصدار أحدث، فسوف يعرض المستعرض المثبِّت السريع لبرنامج Flash Player. وإذا رفض المستخدم التثبيت السريع، فسوف تعرض الصفحة المحتوى البديل.

  1. في طريقة العرض Design من النافذة Document، حدد ملف SWF أو ملف FLV.
  2. انقر فوق أيقونة العين في ملف SWF أو ملف FLV.

    ملاحظة:

    يمكنك أيضًا الضغط على Control + ] للتبديل إلى طريقة عرض المحتوى البديل. وللعودة إلى طريقة عرض SWF/FLV، اضغط على Control + [ حتى يتم تحديد كل المحتوى البديل. ثم اضغط مرة أخرى على Control + [.

  3. قم بتحرير المحتوى بنفس الطريقة التي تتبعها تمامًا في تحرير أي محتوى آخر في Dreamweaver.

    ملاحظة:

    لا يمكنك إضافة ملفات SWF أو ملفات FLV كمحتوى بديل.

  4. انقر فوق رمز العين مرة أخرى للعودة إلى طريقة عرض ملف SWF أو ملف FLV.

حل مشاكل ملفات FLV

يسرد هذا القسم تفاصيل بعض أسباب المشاكل الأكثر شيوعًا في ملفات FLV.

عرض المشاكل التي يسببها غياب الملفات ذات الصلة

تعتمد التعليمة البرمجية التي ينشئها Dreamweaver CS4 والإصدارات الأحدث على أربعة ملفات تابعة تختلف عن ملف FLV نفسه:

  • swfobject_modified.js

  • expressInstall.swf

  • FLVPlayer_Progressive.swf

  • ملف السطح (على سبيل المثال، Clear_Skin_1.swf)

لاحظ أن هناك نوعين إضافيين من الملفات التابعة لتطبيق Dreamweaver CS4 أو الإصدارات الأحدث، مقارنة بالإصدار Dreamweaver CS3.

يتم تثبيت النوعين الأولين من هذه الملفات (swfobject_modified.js وexpressInstall.swf) في مجلد باسم Scripts، يقوم Dreamweaver بإنشائه في جذر الموقع الخاص بك إذا لم يكن موجودًا بالفعل.

ويتم تثبيت النوعين الآخرين (FLVPlayer_Progressive.swf وملف السطح) في نفس مجلد الصفحة التي يتم تضمين ملف FLV فيها. ويحتوي ملف السطح على عناصر التحكم لملف FLV، ويعتمد اسمه على السطح المحدد في الخيارات الموضحة في Dreamweaver Help. على سبيل المثال، إذا اخترت Clear Skin، فسيكون اسم الملف Clear_Skin_1.swf.

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

يعد نسيان تحميل هذه الملفات هو السبب الأكثر شيوعًا وراء فشل تحميل ملفات FLV للتشغيل بصورة صحيحة في صفحة الويب. إذا كان أحد هذه الملفات مفقودًا، فقد ترى "مربعًا فارغًا" في الصفحة.

لضمان تحميل جميع الملفات التابعة، استخدم اللوحة Dreamweaver Files لتحميل الصفحة التي يظهر فيها ملف FLV. بعد تحميل الصفحة، يسألك Dreamweaver ما إذا كنت تريد تحميل الملفات التابعة أم لا (ما لم تكن قد قمت بإيقاف تشغيل هذا الخيار). انقر فوق yes لتحميل الملفات التابعة.

عرض المشاكل عند معاينة الصفحات محليًا

نظرًا للتحديثات الأمنية في Dreamweaver CS4، لا يمكنك استخدام الأمر Preview in Browser لاختبار صفحة بها ملف FLV مضمن ما لم تقم بتعريف خادم اختبار محلي في تعريف موقع Dreamweaver واستخدام خادم الاختبار لمعاينة الصفحة.

تطالب عادةً باستخدام خادم اختبار فقط إذا كنت تقوم بتطوير صفحات بها ASP أو ColdFusion أو PHP (انظر إعداد الكمبيوتر لتطوير التطبيقات). إذا كنت تقوم بإنشاء مواقع ويب تستخدم تنسيق HTML فقط، ولم تقم بتعريف خادم اختبار، يؤدي الضغط على المفتاح F12 (في نظام التشغيل Windows) أو Opt+F12 (في نظام التشغيل Macintosh) إلى إنشاء مجموعة متنوعة من عناصر التحكم بالسطح على الشاشة. ويتمثل الحل البديل في تعريف خادم الاختبار واستخدامه لمعاينة صفحتك، أو تحميل ملفاتك على خادم بعيد وعرضها هناك.

ملاحظة:

من المحتمل أن تكون إعدادات الأمان مسؤولة أيضًا عن تعذر معاينة محتوى FLV المحلي، ولكن Adobe غير قادرة على تأكيد ذلك. يمكنك محاولة تغيير إعدادات الأمان لمعرفة ما إذا كانت مجدية أم لا. لمزيد من المعلومات حول تغيير إعدادات الأمان، راجع الملاحظة التقنية 117502.

أسباب محتملة أخرى لمشاكل ملفات FLV

  • إذا واجهتك مشكلة في المعاينة محليًا، فتأكد أن الخيار Preview using temporary file قد تم إلغاء تحديده ضمن Edit > Preferences > Real-time Preview.

  • تأكد من توفر أحدث إصدار من مكون FlashPlayer الإضافي.

  • كن حذرًا عند نقل الملفات والمجلدات خارج Dreamweaver. فعند نقل الملفات والمجلدات خارج Dreamweaver، يتعذر على Dreamweaver ضمان المسارات الصحيحة إلى الملفات ذات الصلة بـ FLV.

  • يمكنك استبدال ملف FLV الذي يتسبب في مشكلة مؤقتًا بملف FLV معروف بعمله على نحو جيد. وإذا عمل ملف FLV البديل بشكل جيد، عندئذ تكون المشكلة في ملف FLV الأصلي، وليست بسبب المستعرض أو الكمبيوتر.

تحرير مكون FLV أو حذفه

يمكنك تغيير إعدادات الفيديو على صفحة الويب من خلال تحديد العنصر النائب لمكون الفيديو في النافذة Dreamweaver Document واستخدام عارض الخصائص. أو قم بحذف مكون الفيديو وإعادة إدراجه من خلال تحديد Insert > HTML > Flash Video.

تحرير مكون FLV

  1. حدد العنصر النائب لمكون الفيديو في النافذة Dreamweaver Document بالنقر فوق أيقونة FLV في وسط العنصر النائب.
  2. افتح عارض الخصائص (Window > ‏Properties) وقم بإدخال التغييرات.

    ملاحظة:

    لا يمكنك تغيير أنواع الفيديو (من تنزيل متتالي إلى متدفق، على سبيل المثال) باستخدام عارض الخصائص. لتغيير نوع الفيديو، احذف مكون FLV، وأعد إدراجه من خلال تحديد Insert > ‏Media > ‏FLV.

حذف مكون FLV

  1. حدد العنصر النائب لمكون FLV في النافذة Dreamweaver Document واضغط على Delete.

إضافة الفيديو (التنسيقات الأخرى)

لمعرفة المزيد حول إضافة مقاطع الفيديو التي ليست بملحق .flv، انظر إضافة الفيديو (بملحق خلاف FLV)

قد تحتاج أيضًا إلى معرفة كيفية إدراج محتوى المكونات الإضافية في Dreamweaver لتشغيل ملفات .mp3 أو مقاطع فيديو Quicktime في موقع Dreamweaver لديك.

تم ترخيص هذا العمل بموجب الترخيص العام غير المعدل الخاص بالإسناد وعدم التجارة والمشاركة الإصدار 3.0 ‏من ‏‏Creative Commons‏‏  إن بنود Creative Commons لا تشمل منشورات Twitter™‎ وFacebook.

إشعارات قانونية   |   سياسة الخصوصية على الإنترنت