اذهب إلى المحتوى
  • 0

كيفية إدراج فيديو بصيغة mov في html

Amro Atef Awad

السؤال

لماذا لا تعمل صيغة MOV مع وسم video عندما اكتبه في الصورة المرفقة وما الحلول المقترحة

وهل هناك صيغ محددة تعمل فقط مع وسم<video>

ولماذا نستخدم وسم <source>  مع وسم <video> الا يمكننا الاعتماد على وسم <video> فقط؟؟

MOV error .png

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

دعني أوضح لك لماذا لا تعمل صيغة MOV مع وسم video عند كتابته في الصورة المرفقة وما هي الحلول المقترحة.

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

ومن الحلول المقترحة لهذه المشكلة، يمكن استخدام وسم <source> لتحديد صيغ متعددة للفيديو والتي يمكن للمتصفح عرضها. يمكن وضع ملفات الفيديو بصيغ مختلفة، مثل MP4 وWebM وغيرها، داخل وسم source ليتم تحميل الصيغة المدعومة من قبل المتصفح بشكل تلقائي، وبالتالي يتم تشغيل الفيديو بشكل صحيح.

و يتم استخدام وسم <source> لتوفير صيغ مختلفة للفيديو ، بحيث يمكن للمتصفح اختيار الصيغة التي تعمل على جهاز المستخدم والتي تتوافق مع متصفحه. وبذلك، يمكن أن يتم تشغيل الفيديو بشكل صحيح على أي جهاز وأي متصفح.

إذا كنت تريد تشغيل مقاطع الفيديو بدون استخدام وسم <source>، فيجب عليك استخدام الصيغ المدعومة بشكل جيد من قبل المتصفحات، مثل MP4 وWebM.

بإليك بعض الأمثلة التي توضح استخدام وسم <source> مع وسم <video>:

1. استخدام وسم <source> لتوفير صيغ مختلفة للفيديو:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Your browser does not support HTML5 video.</p>
</video>

هذا المثال يعرض فيديو MP4 إذا كان المتصفح يدعمه، وإذا لم يدعمه يعرض فيديو WebM.

2. استخدام وسم <source> لتوفير صيغ مختلفة ودقة مختلفة للفيديو:

<video controls>
  <source src="video-720p.mp4" type="video/mp4" media="(min-width: 640px)">
  <source src="video-1080p.mp4" type="video/mp4" media="(min-width: 1024px)">
  <p>Your browser does not support HTML5 video.</p>
</video>

هذا المثال يعرض فيديو 720p إذا كان عرض الشاشة أكبر من 640 بكسل، وإذا كان أكبر من 1024 بكسل يعرض فيديو 1080p.

يمكن استخدام وسم <video> بدون وسم <source>، ولكن في هذه الحالة يجب التأكد من استخدام صيغ مدعومة بشكل جيد من قبل معظم المتصفحات. على سبيل المثال:

<video controls src="video.mp4" type="video/mp4">
  <p>Your browser does not support HTML5 video.</p>
</video>

في هذا المثال، يتم استخدام وسم <video> بدون وسم <source>، ولكن يتم تحديد صيغة MP4 مباشرة في الوسم <video>. ويتم استخدام النص داخل الوسم <p> في حال عدم دعم المتصفح لصيغة الفيديو المحددة.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

دعم الصيغ يتوقف على المتصفح الذي تستخدمه، 

جرب الكود التالي :

<video width="320" height="240" controls>
  <source src="movie.mov" type="video/mp4">
  Your browser does not support the video tag.
</video>

حيث ان النوع يجب أن يكون video/mp4.

وكذلك يجب أن تتأكد من ان مسار الفيديو صحيح.

بتاريخ 9 دقائق مضت قال عمرو عاطف5:

ولماذا نستخدم وسم <source>  مع وسم <video> الا يمكننا الاعتماد على وسم <video> فقط؟؟

نعم يمكن تشغيل الفيديو في HTML دون استخدام وسم source ولكن لا ينصح بذلك، حيث يستخدم العنصر source داخل العنصر video لتحديد مصادر الفيديو المختلفة التي يمكن استخدامها في حالة عدم دعم المتصفح لصيغة الفيديو الأساسية.

يمكن تحديد عدة مصادر للفيديو باستخدام عناصر source متعددة داخل عنصر video، وسيقوم المتصفح بتحميل أول مصدر يتوافق مع صيغة الفيديو المدعومة.

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

بخصوص شرح عن <video> فستجد شرح كامل له في موسوعة حسوب، وأيضًا هناك دروس في قسم المقالات يشرح كيفية إضافة مقاطع الفيديو في HTML:

وبخصوص العنصر <source> فقد تم شرحه في موسوعة حسوب أيضًا:

وسبب أن الفيديو لا يعمل أن الصيغة  .mov  غير مدعومة في html5 وتستطيع رؤية الصيغ المدعومة من هنا:

والأمر يتطلب تحويل صيغة الفيديو إلى صيغة أخرى قبل عرضه في المتصفح وهناك مكتبات لذلك مثل html5-media-converter، ولكن لتجنب تعقيد الأمور الآن، استخدم فيديو بصيغة mp4.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...