تغيير مصدر علامة فيديو HTML5: حل شامل

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

تحديد نوع الملف باستخدام canPlayType():

لتحديد نوع الملف المناسب للفيديو، يمكننا الاستفادة من الدالة canPlayType(). تقوم هذه الوظيفة بإرجاع سلسلة تشير إلى مستوى دعم المتصفح لنوع وسائط معين. على سبيل المثال:

var canPlayMP4 = video.canPlayType('video/mp4');
var canPlayWebM = video.canPlayType('video/webm');

استنادًا إلى نتائج canPlayType()، يمكننا تعيين سمة src لعلامة

التنفيذ باستخدام Vanilla JavaScript:

إليك مقتطف من التعليمات البرمجية يوضح ذلك كيفية تغيير مصدر الفيديو باستخدام Vanilla JavaScript:

var video = document.getElementById('video');

// Create a new source element
var source = document.createElement('source');

// Set the source attributes dynamically based on browser support
if (canPlayMP4) {
  source.setAttribute('src', 'video.mp4');
  source.setAttribute('type', 'video/mp4');
} else if (canPlayWebM) {
  source.setAttribute('src', 'video.webm');
  source.setAttribute('type', 'video/webm');
}

// Append the source to the video element
video.appendChild(source);

// Play the video
video.play();

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