Trong hướng dẫn này, chúng ta sẽ xem cách Lấy chiều rộng và chiều cao của hình ảnh bằng JavaScript, Hai thuộc tính JavaScript. chiều rộng tự nhiên và. naturalHeight được sử dụng cho việc này
Mục lục
Mã HTML
Mã HTML được đưa ra dưới đây
________0Mã JavaScript
Mã JavaScript được cung cấp bên dưới, Trong mã này, chúng tôi đã sử dụng các thuộc tính naturalWidth và naturalHeight để lấy chiều rộng và chiều cao ban đầu của hình ảnh
Nhận chiều rộng và chiều cao của video với ffprobe. Yêu cầu cài đặt nhị phân ffprobe
var getDimensions = require('get-video-width-height'); getDimensions('video.mp4').then(function (dimensions) { console.log(dimensions.width); console.log(dimensions.height); })
Thuộc tính _______________ chỉ đọc giao diện _______________ 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 cao của phương tiện ở kích thước tự nhiên của nó
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
Một giá trị số nguyên chỉ định chiều rộng 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
Mẹo. Luôn chỉ định cả thuộc tính chiều cao và chiều rộng cho video. Nếu chiều cao và chiều rộng được đặt, không gian cần thiết cho video sẽ được dành riêng khi tải trang. Tuy nhiên, nếu không có các thuộc tính này, trình duyệt sẽ không biết kích thước của video và không thể dành không gian thích hợp cho video đó. Hiệu ứng sẽ là bố cục trang sẽ thay đổi trong khi tải (trong khi tải video)
Ghi chú. Không rescale video với các thuộc tính chiều cao và chiều rộng. Thu nhỏ video lớn với các thuộc tính chiều cao và chiều rộng buộc người dùng phải tải xuống video gốc (ngay cả khi video trông nhỏ trên trang). Cách chính xác để thay đổi tỷ lệ video là với một chương trình, trước khi sử dụng nó trên một trang