إضافة مقاطع الفيديو في Dreamweaver

تاريخ آخر تحديث 25 سبتمبر 2023

تعرف على كيفية تضمين مقاطع الفيديو في صفحات الويب وإدراج ملفات 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 المحدد ومجموعة عناصر تحكم التشغيل

يمنحك 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

حدد Insert > HTML > Flash Video.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Server URI

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

Stream Name

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

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 بحيث يبدأ الفيديو في التشغيل فوراً بعد النقر على زر التشغيل.(إذا تم تحديد التشغيل التلقائي، يبدأ تشغيل الفيديو بمجرد إجراء اتصال مع الخادم.)قد تريد تعيين وقت مخزن مؤقت إذا كنت تقدم فيديو له معدل بت أعلى من سرعة اتصال زائر الموقع، أو عندما قد تسبب حركة الإنترنت مشاكل في النطاق الترددي أو الاتصال.على سبيل المثال، إذا كنت تريد إرسال 15 ثانية من الفيديو إلى صفحة الويب قبل أن تبدأ صفحة الويب في تشغيل الفيديو، عيّن وقت المخزن المؤقت إلى 15.

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

ينشئ أمر إدراج FLV ملف SWF لمشغل الفيديو وملف SWF للمظهر، وهما يُستخدمان لعرض الفيديو على صفحة ويب.ينشئ الأمر أيضاً ملف main.asc الذي يجب تحميله إلى Flash Media Server الخاص بك.(لرؤية الملفات الجديدة، قد تحتاج إلى النقر على زر التحديث في لوحة الملفات.)يتم تخزين هذه الملفات في الدليل نفسه الذي يوجد فيه ملف HTML الذي تضيف إليه محتوى الفيديو.عندما تحمّل صفحة HTML التي تحتوي على ملف FLV، لا تنس تحميل ملفات SWF إلى خادم الويب الخاص بك، وملف main.asc إلى Flash Media Server الخاص بك.

ملاحظة

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

يمكنك بسهولة تحميل جميع ملفات الوسائط المطلوبة عن طريق تحديد العنصر النائب لمكون الفيديو في نافذة مستند Dreamweaver، والنقر على زر تحميل الوسائط في Property inspector (نافذة > خصائص).لرؤية قائمة بالملفات المطلوبة، انقر على إظهار الملفات المطلوبة.

ملاحظة

لا يقوم زر تحميل الوسائط بتحميل ملف HTML الذي يحتوي على محتوى الفيديو.

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

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

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

ملاحظة

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

في عرض التصميم لنافذة المستند، حدد ملف SWF أو ملف FLV.

انقر فوق أيقونة العين في ملف SWF أو ملف FLV.

ملاحظة

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

حرر المحتوى تماماً كما تحرر أي محتوى آخر في Dreamweaver.
ملاحظة

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

انقر على أيقونة العين مرة أخرى للعودة إلى عرض ملف 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.على سبيل المثال، إذا اخترت Clear Skin، فسيتم تسمية الملف Clear_Skin_1.swf.

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

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

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

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

بسبب تحديثات الأمان في Dreamweaver CS4، لا يمكنك استخدام أمر المعاينة في المتصفح لاختبار صفحة تحتوي على 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

حدد العنصر النائب لمكون الفيديو في نافذة مستند Dreamweaver بالنقر على أيقونة FLV في وسط العنصر النائب.
افتح Property inspector (نافذة > خصائص) وقم بإجراء تغييراتك.
ملاحظة

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

حذف مكون FLV

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

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

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

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

المزيد مثل هذا