يقوم العنصران <audio> و<video> بدمج الوسائط بشكل أصلي، مع عناصم تحكم مدمجة و واجهة برمجية JavaScript — بدون الحاجة إلى إضافات.
html
Your browser does not support video.
controls — بدونها، لا تظهر واجهة رسومية (يجب عليك التحكم عبر JS).<source> متعددة — المتصفح يستخدم الصيغة الأولى التي يدعمها (WebM/MP4 للعمل على جميع المتصفحات).poster — صورة عنصر نائب قبل التشغيل.preload — none / metadata / auto؛ استخدم metadata لتجنب تحميل الملفات الكبيرة حتى تكون مطلوبة.autoplay muted loop — لمقاطع الفيديو الخلفية (معظم المتصفحات تتطلب muted للسماح بالتشغيل التلقائي).<track> — الترجمات/الكتوب للوصول (ملف .vtt).const v = document.querySelector("video");
v.play(); // returns a promise (may reject if autoplay blocked)
v.pause();
v.currentTime = 30; // seek to 30 seconds
v.volume = 0.5;
v.addEventListener("ended", () => console.log("finished"));
<audio> يعمل بنفس الطريقة، فقط بدون الإطار البصري/الصورة النائبة.
عناصر الوسائط الأصلية توفر لك تشغيل الفيديو عبر المتصفحات، إمكانية الوصول (الترجمات عبر <track>)، و واجهة برمجية JavaScript كاملة لمشغلات مخصصة.
معرفة نمط fallback الصيغة، قاعدة muted-لـ autoplay، و preload للأداء تغطي الأساسيات العملية لدمج الوسائط.
مكتبة من أسئلة مقابلات تقنية المعلومات مع إجابات مفصّلة — من المبتدئ إلى المتقدم.
تبرع