Nhận chiều rộng và chiều cao của video JavaScript

Một giá trị số nguyên chỉ định chiều cao nội tại của video tính bằng pixel CSS. Nếu readyState của phần tử là HTMLMediaElement.HAVE_NOTHING, thì giá trị của thuộc tính này là 0, vì chưa có thông tin về kích thước khung hình áp phích và video

Tác nhân người dùng tính toán chiều rộng và chiều cao nội tại của phương tiện của phần tử bằng cách bắt đầu với chiều rộng và chiều cao pixel thô của phương tiện, sau đó tính đến các yếu tố bao gồm

• Tỷ lệ khung hình của phương tiện truyền thông
• Khẩu độ rõ ràng của phương tiện (hình chữ nhật con ở giữa trong phương tiện phù hợp với tỷ lệ khung hình mục tiêu)
• Độ phân giải của thiết bị đích
• Bất kỳ yếu tố nào khác theo yêu cầu của định dạng phương tiện

Nếu phần tử hiện đang hiển thị khung áp phích chứ không phải video được hiển thị, thì kích thước nội tại của khung áp phích được coi là kích thước của phần tử <video>

Nếu tại bất kỳ thời điểm nào kích thước bên trong của phương tiện thay đổi và phần tử readyState không phải là HAVE_NOTHING, một sự kiện resize sẽ được gửi đến phần tử <video>. Điều này có thể xảy ra khi phần tử chuyển từ hiển thị khung áp phích sang hiển thị nội dung video hoặc khi bản nhạc video được hiển thị thay đổi

Ví dụ này tạo một trình xử lý cho sự kiện resize thay đổi kích thước phần tử <video> để phù hợp với kích thước nội tại của nội dung của nó

let v = document.getElementById("myVideo");

v.addEventListener("resize", (ev) => {
  let w = v.videoWidth;
  let h = v.videoHeight;

  if (w && h) {
    v.style.width = w;
    v.style.height = h;
  }
}, false);

Lưu ý rằng điều này chỉ áp dụng thay đổi nếu cả HTMLVideoElement2 và videoHeight đều khác không. Điều này tránh áp dụng các thay đổi không hợp lệ khi chưa có thông tin xác thực cho các thứ nguyên

Thuộc tính _______________ chỉ đọc của giao diện _______19_______ cho biết nội dung của video, được thể hiện bằng pixel CSS. Nói một cách đơn giản, đây là chiều rộng của phương tiện ở kích thước tự nhiên của nó

Xem để biết thêm chi tiết