عنصر video ونسبة العرض إلى الارتفاع

عنصر الفيديو

<video controls width="800" height="450" src="tutorial.mp4">
  Your browser does not support video.
</video>

السمات الأساسية

<video
  src="demo.mp4"
  controls           <!-- show player UI -->
  width="1280"       <!-- intrinsic width -->
  height="720"       <!-- intrinsic height -->
  poster="preview.jpg" <!-- thumbnail before play -->
  preload="metadata"   <!-- preload only metadata -->
>
  Your browser does not support video.
</video>

سمة poster

<video controls poster="/thumbnails/episode-42.jpg" width="800" height="450">
  <source src="episode-42.mp4" type="video/mp4">
</video>
<!-- Without poster: browser shows a black frame
     or the first frame of the video (browser-dependent) -->

العرض والارتفاع لنسبة العرض إلى الارتفاع

<video controls width="1280" height="720" src="video.mp4"></video>
<!-- Browser reserves correct space before video loads -->
<!-- Prevents CLS (Cumulative Layout Shift) -->
<!-- Make responsive with CSS:
  video { width: 100%; height: auto; }
-->

CSS للفيديو المتجاوب

video {
  width: 100%;
  height: auto;
  max-width: 1280px;
  display: block;
  margin: 0 auto;
}

/* Aspect ratio box: */
.video-wrapper {
  position: relative;
  padding-top: 56.25%;  /* 16:9 aspect ratio: 9/16 = 0.5625 */
}
.video-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

خاصية CSS aspect-ratio

video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* Other common ratios: */
/* 4:3 → aspect-ratio: 4 / 3 */
/* 21:9 → aspect-ratio: 21 / 9 */
/* 1:1 → aspect-ratio: 1 */

عناصر التحكم في تشغيل الفيديو عبر JS

const video = document.getElementById('my-video');

video.play();
video.pause();
video.currentTime = 60;  // jump to 1 minute
video.playbackRate = 1.5;  // 1.5x speed
video.volume = 0.7;
video.muted = true;
video.requestFullscreen();

console.log(video.duration);    // total length
console.log(video.paused);      // is it paused?

أحداث الفيديو

video.addEventListener('play', () => updatePlayButton());
video.addEventListener('pause', () => updatePlayButton());
video.addEventListener('ended', () => showNextVideo());
video.addEventListener('timeupdate', () => updateProgressBar());
video.addEventListener('loadedmetadata', () => {
  console.log('Duration:', video.duration);
  console.log('Dimensions:', video.videoWidth, 'x', video.videoHeight);
});

واجهة برمجة تطبيقات ملء الشاشة

const btn = document.getElementById('fullscreen-btn');
const video = document.getElementById('player');

btn.addEventListener('click', () => {
  if (!document.fullscreenElement) {
    video.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
});

document.addEventListener('fullscreenchange', () => {
  btn.textContent = document.fullscreenElement ? 'Exit Fullscreen' : 'Fullscreen';
});

سياسة التشغيل التلقائي للفيديو

إمكانية الوصول إلى الفيديو

تحقق سريع

خلاصة: عنصر الفيديو