Làm cách nào để tăng chiều cao video trong CSS?
|
Codec video hoạt động tốt hơn khi chiều rộng và chiều cao tính bằng pixel là bội số của 16. Mặc dù bạn có thể sử dụng bất kỳ chiều rộng và chiều cao nào trong cài đặt mã hóa của mình, nhưng kích thước không tối ưu có thể dẫn đến chất lượng hình ảnh kém và giảm tốc độ khung hình. Để có chất lượng hình ảnh và phát lại tốt nhất, bạn nên sử dụng kích thước chiều rộng và chiều cao cho video của mình là bội số của 16; Show Cả kích thước mã hóa gốc và kích thước phát lại phải chia hết cho cùng một số, lý tưởng là 16. Ví dụ: nếu bạn mã hóa tệp gốc của mình để sử dụng kích thước khung là 640×480, hãy giảm tỷ lệ xuống kích thước chẳng hạn như 320×240 Các bảng sau đây liệt kê một tập hợp các phép đo chiều rộng theo chiều cao theo chất lượng cho 16. 9 và 4. 3 tỷ lệ khung hình Thiết kế đáp ứng và hướng nghệ thuật thường yêu cầu hiển thị video ở nhiều kích cỡ khác nhau, thường nhỏ hơn nhiều so với bản gốc Nếu bạn phân phối video có kích thước đầy đủ và dựa vào tính năng thay đổi kích thước phía trình duyệt (sử dụng thuộc tính chiều rộng và chiều cao của CSS hoặc HTML), thì người dùng buộc phải tải xuống các tệp lớn không cần thiết. Do đó, video phải luôn được phân phối từ máy chủ ở kích thước cuối cùng Khi bạn sử dụng bất kỳ chuyển đổi thay đổi kích thước Cloudinary nào, kích thước (chia tỷ lệ/cắt xén) được thực hiện ở phía máy chủ và nội dung luôn được gửi đến trình duyệt ở kích thước được yêu cầu Dưới đây là một số ví dụ về các kỹ thuật cắt hoặc thay đổi kích thước khác nhau được sử dụng trên cùng một video Tự động cắt lấy nét trên khuôn mặt CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")88Pad có nền mờCloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")89Giữ nửa bên phảiCloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")90Bạn có thể đặt kích thước mục tiêu của video đã thay đổi kích thước của mình bằng cách chỉ định chiều rộng, chiều cao và/hoặc tỷ lệ khung hình mục tiêu làm tiêu chuẩn cho quá trình chuyển đổi kích thước của bạn
Nếu bạn chỉ muốn thay đổi kích thước một thứ nguyên và giữ thứ nguyên kia ở kích thước ban đầu (chứ không phải xác định tự động được mô tả ở trên), bạn có thể chỉ định chiều rộng hoặc chỉ chiều cao và thêm vòng loại cờ fl_ignore_aspect_ratio Khi thay đổi kích thước của video đã tải lên bằng cách đặt chiều cao, chiều rộng và/hoặc tỷ lệ khung hình của video, bạn cần quyết định cách đổi kích thước hoặc cắt video để vừa với kích thước được yêu cầu. Sử dụng tham số c (cắt/thay đổi kích thước) để chọn chế độ cắt/thay đổi kích thước. Cloudinary hỗ trợ các chế độ thay đổi kích thước/cắt video sau đây Chế độ cắt/thay đổi kích thước Hành vi Chế độ cắt Nếu kích thước được yêu cầu có tỷ lệ khung hình khác với kích thước ban đầu, các chế độ này sẽ cắt bỏ một phần video. fillThay đổi kích thước video để lấp đầy các kích thước đã chỉ định mà không bị biến dạng. Kết quả là video có thể bị cắt. fill_padGiống nhưCloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")207, nhưng tránh cắt xén quá mức bằng cách thêm phần đệm khi cần. Chỉ được hỗ trợ với tính năng cắt xén tự động. cropTrích xuất một vùng có kích thước được chỉ định từ video gốc mà không cần thay đổi kích thước trước. Các chế độ thay đổi kích thước Các chế độ này điều chỉnh kích thước của video được phân phối mà không cắt xén bất kỳ thành phần nào của video gốc. scaleThay đổi kích thước video theo kích thước đã chỉ định mà không nhất thiết phải giữ lại tỷ lệ khung hình ban đầu. vừa vặnThay đổi kích thước video để vừa với bên trong hộp giới hạn được chỉ định bởi kích thước, duy trì tỷ lệ khung hình. giới hạnGiống như CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")208, nhưng chỉ thu nhỏ video. padThay đổi kích thước video để vừa với bên trong hộp giới hạn được chỉ định bởi kích thước, duy trì tỷ lệ khung hình và áp dụng phần đệm nếu video đã thay đổi kích thước không lấp đầy toàn bộ khu vực. lpadGiống như CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")209, nhưng chỉ thu nhỏ video lạiKhi tạo URL phân phối động, nếu bạn chỉ chỉ định tham số chiều rộng và/hoặc chiều cao, nhưng không có chế độ cắt xén (không có CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")210), video sẽ được chia tỷ lệ theo kích thước mới theo mặc định. Tuy nhiên, không có chế độ cắt xén mặc định khi sử dụng các phương pháp của trình trợ giúp Cloudinary SDK (xem Nhúng video vào trang web), vì vậy chế độ cắt xén phải được đặt rõ ràngMột số chế độ cắt xén chỉ giữ một phần nhất định của video gốc trong video kết quả. Theo mặc định, trung tâm của video được giữ ở dạng cắt, nhưng điều này không phải lúc nào cũng lý tưởng. Để giữ các phần quan trọng của video đối với bạn, bạn có thể sử dụng tham số trọng lực. Ví dụ: bạn có thể chỉ định giữ nguyên khuôn mặt hoặc hướng về một khu vực quan tâm được xác định tự động. Bạn cũng có thể hướng phần cắt xén theo các khu vực của video được xác định bằng các điểm la bàn, ví dụ: CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")211 để giữ phần trên cùng của video hoặc CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")212 để giữ phần dưới cùng bên phảiCác ví dụ sau đây cho thấy cùng một video đã thay đổi kích thước thành chiều rộng và chiều cao là 200 pixel, sử dụng các phương pháp thay đổi kích thước và cắt xén khác nhau Video gốc là 224 x 400 pixel Thay đổi kích thước video thành 200 x 200 pixel, sử dụng cắt, chia tỷ lệ, điền và đệm dẫn đến các video sau c_crop,h_200,w_200c_scale,h_200,w_200 c_fill,h_200,w_200b_black,c_pad,h_200,w_200 Bạn có thể cung cấp phép biến đổi CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")213 được hiển thị ở trên như sauCloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")6PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")7PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")8CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")2CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")1JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")2jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")3Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")71CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")72Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")73Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")74Các phần sau đây giải thích cách hoạt động của từng chế độ cắt Chế độ cắt xén CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")207 tạo video có kích thước được chỉ định chính xác mà không làm biến dạng video. Trước tiên, tùy chọn này tăng hoặc giảm tỷ lệ theo mức cần thiết để ít nhất lấp đầy cả hai thứ nguyên đã chỉ định. Nếu tỷ lệ khung hình được yêu cầu khác với tỷ lệ khung hình ban đầu, thì việc cắt xén sẽ xảy ra đối với kích thước vượt quá kích thước được yêu cầu sau khi chia tỷ lệ. Bạn có thể chỉ định phần nào của video gốc mà bạn muốn giữ lại nếu xảy ra việc cắt xén bằng cách sử dụng tham số trọng lực (được đặt thành CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")215 theo mặc định)ví dụ 1. Lấp đầy một khu vực cụ thể bằng videoLấp đầy hình vuông 250 pixel bằng video khối Rubik CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")75PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")76PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")77CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")78Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")79CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")80JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")81jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")82Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")86CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")87Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")88Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")89ví dụ 2. Lấp đầy một khu vực cụ thể bằng một phần cụ thể của videoLấp đầy hình vuông 250 pixel bằng phần trên cùng bên trái (hướng tây bắc trọng lực) của video khối Rubik CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")0PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")1PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")2CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")3Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")5JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")6jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")7Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")21CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")22Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")23Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")24Chế độ cắt xén CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")216 cố gắng ngăn "cắt xén xấu" bằng cách thêm phần đệm vào bất kỳ khung nào mà nội dung thú vị bị mất nếu áp dụng chế độ CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")207 tiêu chuẩn. Điều này đặc biệt hữu ích nếu tỷ lệ khung hình của video được phân phối khác đáng kể so với tỷ lệ khung hình của video gốc. Nó chỉ được hỗ trợ cùng với Tự động cắt xén (g_auto)Ví dụ. So sánh chế độ điền tiêu chuẩn với chế độ fill_padVideo bên trái được phát lúc 9 giờ. 16 sử dụng chế độ cắt CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")207 và video ở bên phải sử dụng chế độ cắt CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")216. Bạn sẽ thấy phần đầu của video được cắt giống nhau, nhưng video ở bên phải sau đó đệm video để đảm bảo tất cả các đối tượng đều được hiển thịCloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")25PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")26PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")27CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")28Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")29CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")10JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")11jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")12Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")15NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")16CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")17Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")18Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")19Chế độ cắt xén CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")220 trích xuất một vùng có kích thước được chỉ định từ video gốc. Không áp dụng tỷ lệ, do đó, áp dụng chế độ CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")220 cho cùng một video có độ phân giải khác nhau có thể mang lại kết quả rất khác nhau. Bạn có thể chỉ định tham số trọng lực để chọn khu vực hoặc đối tượng cần trích xuất hoặc sử dụng cắt xén tọa độ cố địnhví dụ 1. Cắt video theo kích thước được chỉ định (chiều rộng và chiều cao)Cắt video con chó thành chiều rộng 200 pixel và chiều cao 150 pixel, với trọng lực hướng bắc CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")20PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")21PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")22CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")23Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")24CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")25JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")26jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")27Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")31CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")32Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")33Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")34ví dụ 2. Cắt video theo kích thước đã chỉ định (tỷ lệ khung hình và chiều rộng)Cắt video về chó thành chiều rộng 450 pixel và tỷ lệ khung hình là 2. 5 CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")35PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")36PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")37CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")38Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")39CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")40JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")41jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")42Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")46CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")47Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")48Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")49Đã sửa lỗi cắt xén tọa độBạn có thể chỉ định vùng của video gốc để cắt bằng cách cung cấp tọa độ CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")222 và CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")223 của góc trên cùng bên trái của vùng cùng với CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")224 và CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")225 của vùng. Bạn cũng có thể sử dụng các số dựa trên tỷ lệ phần trăm thay vì tọa độ chính xác cho CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")222, CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")223, CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")228 và CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")229 (e. g. , 0. 5 cho 50%). Sử dụng phương pháp này khi bạn biết trước tọa độ cắt tuyệt đối chính xác là gì, chẳng hạn như khi người dùng của bạn chọn vùng để cắt khỏi video gốc theo cách thủ côngĐể thay đổi kích thước video khối Rubik để tập trung chủ yếu vào khối, video được cắt thành vùng 150x150 bắt đầu từ tọa độ x = 10 và y = 80 CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")40PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")41PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")42CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")43Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")44CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")45JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")46jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")47Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")701CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")702Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")703Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")704Chế độ thay đổi kích thước CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")230 thay đổi kích thước của video chính xác theo kích thước đã chỉ định mà không nhất thiết phải giữ lại tỷ lệ khung hình ban đầu. tất cả các phần video gốc đều hiển thị nhưng có thể bị kéo dài hoặc thu nhỏ. Nếu chỉ xác định chiều rộng hoặc chiều cao thì video sẽ được chia tỷ lệ theo kích thước mới trong khi vẫn giữ nguyên tỷ lệ khung hình ban đầu, trừ khi bạn cũng bao gồm cờ ignore_aspect_ratioví dụ 1. Chia tỷ lệ trong khi duy trì tỷ lệ khung hìnhChia tỷ lệ video về chó thành chiều rộng 150 pixel (duy trì tỷ lệ khung hình theo mặc định) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")705PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")706PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")707CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")708Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")709CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")710JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")711jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")712Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")716CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")717Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")718Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")719ví dụ 2. Chia tỷ lệ mà không duy trì tỷ lệ khung hìnhChia tỷ lệ video về chó thành chiều rộng và chiều cao 150 pixel mà không duy trì tỷ lệ khung hình CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")720PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")721PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")722CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")723Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")724CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")725JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")726jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")727Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")731CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")732Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")733Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")734ví dụ 3. Quy mô theo tỷ lệ phần trămChia tỷ lệ video về chó thành chiều rộng 25% (duy trì tỷ lệ khung hình theo mặc định) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")735PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")736PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")737CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")738Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")739CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")740JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")741jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")742Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")746CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")747Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")748Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")749Ví dụ 4. Chia tỷ lệ bằng cách đặt tỷ lệ khung hình và chiều rộngChia tỷ lệ video về chó thành chiều rộng 100, thay đổi tỷ lệ khung hình thành 1. 2 CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")750PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")751PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")752CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")753Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")754CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")755JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")756jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")757Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")761CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")762Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")763Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")764Chế độ thay đổi kích thước CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")208 thay đổi kích thước video để video chiếm nhiều dung lượng nhất có thể trong hộp giới hạn được xác định bởi các kích thước đã chỉ định. Tỷ lệ khung hình ban đầu được giữ lại và tất cả video gốc được hiển thịví dụ 1. Đặt video bên trong hộp giới hạn hình vuôngThay đổi kích thước video về chó để vừa với chiều rộng và chiều cao 250 pixel trong khi vẫn giữ nguyên tỷ lệ khung hình CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")765PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")766PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")767CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")768Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")769CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")770JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")771jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")772Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")776CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")777Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")778Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")779ví dụ 2. Sử dụng tỷ lệ khung hình để xác định hộp giới hạnĐổi kích thước video về chó để vừa với hình vuông 150 pixel được xác định theo tỷ lệ khung hình và chiều cao CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")780PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")781PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")782CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")783Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")784CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")785JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")786jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")787Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")791CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")792Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")793Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")794Chế độ thay đổi kích thước CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")232 hoạt động giống như chế độ CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")208 nhưng chỉ khi video gốc lớn hơn giới hạn đã chỉ định (chiều rộng và chiều cao), trong trường hợp đó, video được thu nhỏ lại để chiếm nhiều dung lượng nhất có thể trong một giới hạn . Tỷ lệ khung hình ban đầu được giữ lại và tất cả video gốc được hiển thị. Chế độ này không phóng to video nếu kích thước yêu cầu của bạn lớn hơn kích thước của video gốcví dụ 1. Giới hạn kích thước của video trong hộp giới hạn hình vuôngGiới hạn video về chó ở chiều rộng và chiều cao là 250 pixel trong khi vẫn giữ nguyên tỷ lệ khung hình CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")795PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")796PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")797CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")798Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")799CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")800JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")801jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")802Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")806CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")807Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")808Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")809ví dụ 2. Sử dụng tỷ lệ khung hình để xác định hộp giới hạn giới hạnGiới hạn video về chó ở hình vuông 150 pixel được xác định theo tỷ lệ khung hình và chiều cao CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")810PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")811PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")812CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")813Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")814CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")815JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")816jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")817Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")821CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")822Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")823Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")824Chế độ thay đổi kích thước CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")209 thay đổi kích thước video để lấp đầy các kích thước đã chỉ định trong khi vẫn giữ nguyên tỷ lệ khung hình gốc và hiển thị tất cả video gốc. Nếu tỷ lệ của video gốc không khớp với kích thước đã chỉ định, phần đệm sẽ được thêm vào video để đạt được kích thước yêu cầu. Bạn cũng có thể chỉ định vị trí đặt video gốc bằng cách sử dụng tham số trọng lực (được đặt thành CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")215 theo mặc định) và chỉ định màu nền trong trường hợp phần đệm được thêm vàoví dụ 1. Thay đổi kích thước và đệm video để lấp đầy hình vuông được xác định theo chiều rộng và chiều caoThay đổi kích thước và đệm video con chó có nền đen thành chiều rộng và chiều cao là 250 pixel CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")825PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")826PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")827CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")828Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")829CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")830JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")831jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")832Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")836CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")837Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")838Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")839ví dụ 2. Thay đổi kích thước và đệm video để lấp đầy hình chữ nhật được xác định theo tỷ lệ khung hìnhThay đổi kích thước và đệm video con chó có nền đen thành hình chữ nhật có chiều cao 150 pixel và tỷ lệ khung hình 2. 1 CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")840PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")841PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")842CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")843Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")844CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")845JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")846jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")847Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")851CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")852Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")853Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")854ví dụ 3. Pad có nền video mờĐôi khi, bạn có thể cần phân phối video có tỷ lệ khung hình rất khác so với kích thước trình phát video mục tiêu, chẳng hạn như phân phối video dọc trong trình phát video hướng ngang. Trong những trường hợp này, bạn có thể sử dụng phiên bản mờ của cùng một video làm nền đệm. Để thực hiện việc này, hãy chỉ định giá trị CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")236 thay vì màu như giá trị CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")237. Bạn cũng có thể tùy ý chỉ định cường độ của hiệu ứng mờ (phạm vi. 1-2000, mặc định 100) và độ sáng của video nền (phạm vi. -300-100, mặc định 0)Ví dụ: phân phối video khối Rubik trong trình phát video 320*480 HTML5 bằng cách đệm video dọc bằng phiên bản mờ của cùng một video ở cường độ CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")238 và độ sáng CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")239CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")855PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")856PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")857CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")858Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")859CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")860JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")861jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")862Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")866CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")867Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")868Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")869Chế độ thay đổi kích thước CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")240 hoạt động giống như chế độ CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")209 nhưng chỉ khi video gốc lớn hơn giới hạn đã chỉ định (chiều rộng và chiều cao), trong trường hợp đó, video được thu nhỏ lại để lấp đầy các kích thước đã chỉ định trong khi vẫn giữ nguyên tỷ lệ khung hình ban đầu và với . Chế độ này không phóng to video nếu kích thước yêu cầu của bạn lớn hơn kích thước của video gốc. Nếu tỷ lệ của video gốc không khớp với kích thước đã chỉ định, phần đệm sẽ được thêm vào video để đạt được kích thước yêu cầu. Bạn cũng có thể chỉ định vị trí đặt video gốc bằng cách sử dụng tham số trọng lực (được đặt thành CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")215 theo mặc định) và chỉ định màu nền trong trường hợp phần đệm được thêm vàoví dụ 1. Thu nhỏ và đệm videoGiới hạn video về chó trong hộp giới hạn 400 x 150 pixel và đệm có nền màu xanh lá cây CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")870PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")871PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")872CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")873Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")874CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")875JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")876jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")877Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")881CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")882Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")883Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")884ví dụ 2. Thu nhỏ và đệm video bằng tỷ lệ khung hìnhGiới hạn video về chó ở một hộp giới hạn được chỉ định bởi tỷ lệ khung hình bằng 0. 66 với chiều rộng 100 pixel và vùng đệm có nền màu xanh lá cây CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")885PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")886PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")887CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")888Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")889CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")890JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")891jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")892Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")896CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")897Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")898Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")899Khi được sử dụng với các chế độ cắt xén để cắt bỏ một phần video, từ hạn định CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")243 (CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")244 trong URL) chỉ định phần nào của video gốc sẽ được giữ lại khi một hoặc cả hai kích thước được yêu cầu nhỏ hơn kích thước ban đầuGiá trị trọng lực cơ bản được chỉ định bằng cách đưa ra hướng la bàn bao gồm. CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")245, CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")211, CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")247, CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")248, CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")249, CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")250, CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")212, CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")252 hoặc CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")215 (giá trị mặc định). Hướng la bàn đại diện cho một vị trí trong video, ví dụ: CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")245 đại diện cho góc trên cùng bên phảiVí dụ: lấp đầy hình vuông 250 pixel bằng video về chó trong khi vẫn giữ nguyên tỷ lệ khung hình
Lựa chọn trọng lực tự động đảm bảo rằng các khu vực thú vị nhất được chọn làm trọng tâm chính trong suốt thời lượng của mỗi video. Mỗi video được phân tích để tìm vùng tối ưu, cho phép bạn điều chỉnh kích thước hoặc tỷ lệ khung hình để phù hợp với tất cả các yêu cầu của mình. Vì vùng tối ưu của video có thể di chuyển từ khung này sang khung khác nên vùng được cắt sẽ điều chỉnh tương ứng. Để điều chỉnh hành vi của thuật toán cắt xén tự động để tập trung vào các khuôn mặt trong video, bạn cũng có thể chỉ định tùy chọn tiêu cự bổ sung
Áp dụng trọng lực nhận biết nội dung tự động bằng cách cắt xén video của bạn bằng chế độ cắt điền hoặc điền vào phần đệm và đặt tham số chuyển đổi CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")243 thành CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")260 (CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")258 trong URL)Ví dụ: để cắt video này thành tỷ lệ khung hình vuông trong khi vẫn giữ con tàu làm tiêu điểm chính xuyên suốt, hãy sử dụng chế độ cắt ________ 1207 CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")42PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")43PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")44CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")45Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")46CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")47JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")48jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")49Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")53CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")54Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")55Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")56Trong một số trường hợp, bạn có thể thấy rằng việc cắt xén sang một tỷ lệ khung hình khác sẽ loại bỏ những phần thú vị của nội dung. Nếu trường hợp này xảy ra, hãy cân nhắc sử dụng chế độ cắt phần đệm với tính năng cắt xén tự động, chế độ này sử dụng phần đệm khi cần thiết để giữ nhiều nội dung thú vị hơn trong phần cắt xén Ví dụ: video tàu lượn siêu tốc này sẽ tự động điều chỉnh tỷ lệ khung hình và phần đệm để giữ hai người trong khung hình nhiều nhất có thể CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")57PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")58PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")59CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")60Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")61CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")62JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")63jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")64Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")4góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")68CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")69Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")71Theo mặc định, thuật toán cắt xén tự động sử dụng thuật toán dự đoán ánh mắt để xác định các khu vực thú vị nhất của video. Để điều chỉnh thuật toán được sử dụng và phát hiện một khuôn mặt hoặc nhiều khuôn mặt, hãy chỉ định tùy chọn tiêu cự. Các tùy chọn có sẵn là
Các ví dụ dưới đây cho thấy sự khác biệt giữa hai tùy chọn nhận diện khuôn mặt Dưới đây là so sánh giữa video gốc quay cảnh chú chó bắt đĩa bay và video tương tự với tỷ lệ khung hình bị đảo ngược. Video bên trái được cắt bằng trọng lực trung tâm mặc định và video còn lại sử dụng trọng lực tự động. Xem cách video được cắt tự động (bên phải) luôn hiển thị đối tượng chính (con chó), ngay cả khi đối tượng đó di chuyển qua khung hình trong video gốc Nhấp vào bất kỳ video nào bên dưới để xem so sánh trong thực tế hoặc sử dụng bản trình diễn cắt xén tự động của chúng tôi để thử trên nhiều mẫu khác nhau hoặc trên video của riêng bạn Cắt xén mặc định Trình khám phá mã. Thay đổi nguồn dựa trên định hướngBạn cũng có thể sử dụng tính năng cắt xén tự động để hiển thị đúng video tùy thuộc vào hướng của thiết bị. Nếu người dùng truy cập trang trong khi duyệt theo hướng dọc, bạn có thể đặt nguồn video HTML5 thành video dọc đã được cắt tự động. Nếu người dùng chuyển sang chế độ ngang, thì nguồn sẽ hoàn nguyên về video ngang ban đầu. CodeSandbox dưới đây là một ví dụ rất đơn giản về cách bạn có thể làm điều này. Sử dụng nút "Thay đổi hướng" để mô phỏng xoay thiết bị hoặc dùng thử trên thiết bị di động Mã này cũng có sẵn trong GitHub Các thiết bị khác nhau hỗ trợ các giá trị DPR khác nhau, được định nghĩa là tỷ lệ giữa pixel vật lý và pixel logic. Điều này có nghĩa là thiết bị có hỗ trợ DPR cao hơn sẽ sử dụng nhiều pixel vật lý hơn để hiển thị video, dẫn đến video rõ ràng hơn, sắc nét hơn Sử dụng tham số CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")265 để đặt giá trị DPR của video được phân phối. Tham số chấp nhận một giá trị số chỉ định hệ số nhân DPRVí dụ: URL sau đây tự động tạo video có tên CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")266 được chia tỷ lệ thành chiều rộng 100 pixel. Đặt giá trị dpr thành 1. 0, 2. 0 (như trong mã ví dụ) hoặc 3. 0 tạo các video sau, đồng thời thay đổi kích thước video để phù hợp với DPR được yêu cầuCloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")72PHP (cloudinary_php 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")73PHP (cloudinary_php 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")74CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")75Nút. js (đám mây 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")76CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")77JS (@cloudinary/url-gen 1. x) JS (cloudinary-core 2. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")78jQuery (đám mây-jquery 2. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")79Phản ứng (@cloudinary/reac 1. x) Phản ứng (đám mây-phản ứng 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70Vue. js (@cloudinary/vue 1. x) Vue. js (đám mây-vue 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")70góc cạnh (@cloudinary/ng 1. x) Góc (@cloudinary/angular-5. x 1. x (cũ)) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")15NET (CloudinaryDotNet 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")83CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")84Android (đám mây-android 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")85Kotlin (kotlin-url-gen 1. x) CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")86Giờ đây, bạn có thể tạo thẻ video HTML có kích thước bắt buộc và phân phối video có độ phân giải phù hợp nhất với mật độ pixel được chỉ định trên thiết bị của người dùng. Ba video bên dưới đều được hiển thị với chiều rộng 200 pixel bằng cách sử dụng thuộc tính chiều rộng thẻ CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")267, đồng thời bạn sẽ thấy nhiều chi tiết hơn và kết quả hình ảnh tốt hơn cho hai video cuối cùng (lần lượt là dpr 2 và dpr 3) nếu bạn xem tài liệu này bằng cách sử dụng
Làm cách nào để căn chỉnh video trong CSS?Dưới đây là 3 cách để căn giữa video của bạn. . Sử dụng ký quỹ. video { hiển thị. chặn; . tự động; sử dụng biến đổi. video { lề trái. 50vw; . dịch(-50%); Sử dụng container & flexbox. . video vùng chứa { hiển thị. uốn cong; . trung tâm; Bạn có thể đặt video trong CSS không?Với những tiến bộ gần đây trong ngành công nghệ, nhà phát triển có thể nhúng video vào nhiều trang web khác nhau. HTML và CSS đã nổi lên như một số công cụ phổ biến để nhúng video .
Làm cách nào để nhúng CSS video?Bài Viết Liên Quan
Bản quyền © 2021 Xây Nhà Inc.
|
