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

دعني أوضح لك لماذا لا تعمل صيغة 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> في حال عدم دعم المتصفح لصيغة الفيديو المحددة.

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

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

<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، وسيقوم المتصفح بتحميل أول مصدر يتوافق مع صيغة الفيديو المدعومة.

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

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

• https://wiki.hsoub.com/HTML/source

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

• https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

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