كيفية تشغيل مقاطع الفيديو على Safari

لاحظت أن الكود الذي قمت بتوفيره يحتوي على بعض الأخطاء التي تمنع عرض الفيديو في متصفح Safari. لتصحيح هذه المشكلة وجعل الفيديو يعمل على جميع المتصفحات، يجب عليك تعديل الكود كما يلي:

1. قم بإضافة صيغة الفيديو البديلة “webm” لضمان تشغيل الفيديو على Safari. يمكنك إضافة السطر التالي بعد الـ الحالي:

htmlCopy code
<source src="images/Forget reg Tv Ad long.webm" type="video/webm">source>

2. استخدم دالة JavaScript للتحقق من دعم متصفح الفيديو واختيار الصيغة المناسبة. يمكنك استخدام الكود التالي:

javascriptCopy code
var video = document.getElementById('video-bg');

if (video.canPlayType('video/mp4')) {
  video.src = 'images/Forget reg Tv Ad long.mp4';
} else if (video.canPlayType('video/webm')) {
  video.src = 'images/Forget reg Tv Ad long.webm';
}

document.getElementById('uni_video_paly_button').addEventListener('click', function() {
  video.play();
  document.getElementById('uni_video_paly_button').remove();
  document.getElementById('uni_bggg').remove();
});

3. قم بتحديث الكود CSS لضمان عرض الفيديو بشكل صحيح. يمكنك استخدام الأنماط التالية:

cssCopy code
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-paly-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.video-paly-button button {
  font-size: 24px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
}

بعد تطبيق هذه الخطوات، يجب أن يعمل الفيديو بنجاح على جميع المتصفحات بما في ذلك Safari.

لتشغيل الفيديو بنجاح في Safari وجميع المتصفحات الأخرى، يُفضل استخدام الصيغ المتعددة (متعددة الكوديكات) للفيديو. يمكنك استخدام صيغ الفيديو الشائعة مثل MP4 و WebM و Ogg. يتم توفير الصيغ المتعددة للفيديو لضمان توافق الفيديو مع مختلف المتصفحات.

في حال كنت تستخدم HTML5 لتضمين الفيديو في صفحتك، يُمكنك استخدام العنصر وتحديد الصيغ المختلفة كخيارات. هذا يسمح للمتصفح بتحميل الصيغة المدعومة الأولى. إليك مثالًا على كيفية استخدام صيغ متعددة للفيديو:

htmlCopy code
<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
video>

يجب أن تحتوي على ملفات الفيديو المذكورة (movie.mp4، movie.webm، movie.ogg) على نفس الدقة والمحتوى، ولكن بتنسيقات مختلفة لتوفير التوافق مع مختلف المتصفحات.