1. Trang chủ
  2. Câu hỏi và trả lời
  3. HTML 5 Đoạn video

HTML 5 Đoạn video

2010-09-23 59 views
31

Bạn có thể tạo video "giãn" thành chiều rộng & chiều cao của phần tử video không? Dường như mặc định, video được thu nhỏ & được trang bị bên trong phần tử video, tương ứng.HTML 5 Đoạn video

nhờ

Nguồn

2010-09-23 thomasdecrick

Trả lời

35

Từ the spec for <video>:

Nội dung video nên được trả lại trong vòng cấm phát lại của phần tử như vậy mà nội dung video được hiển thị trung tâm trong khu vực phát lại ở kích thước lớn nhất có thể phù hợp hoàn toàn bên trong nó , với tỷ lệ cỡ ảnh của nội dung video được giữ nguyên. Do đó, nếu tỷ lệ khung hình của khu vực phát lại không khớp với tỷ lệ khung hình của video, video sẽ được hiển thị hộp thư hoặc hộp thư. Các vùng của khu vực phát lại của phần tử không chứa video không đại diện gì.

Không có quy định để kéo dài video thay vì hộp thư. Điều này có thể do kéo dài mang lại trải nghiệm người dùng rất xấu và phần lớn thời gian không phải là mục đích. Hình ảnh được kéo dài để phù hợp theo mặc định và do đó, bạn thấy rất nhiều hình ảnh bị méo mó trực tuyến, rất có thể do lỗi đơn giản trong việc chỉ định chiều cao và chiều rộng.

Bạn có thể đạt được một hiệu ứng kéo dài sử dụng CSS 3 transforms, mặc dù những người không hoàn toàn chuẩn hoặc thực hiện trong tất cả các trình duyệt nêu ra, và những người thân trong đó nó được thực hiện, bạn cần phải sử dụng một tiền tố nhà cung cấp như -webkit- hoặc -moz-. Dưới đây là ví dụ:

<!DOCTYPE html> 
<style> 
video { 
    -webkit-transform: scaleX(2); 
    -moz-transform: scaleX(2); 
} 
</style> 
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"></video>

Nguồn

2010-09-23 17:19:17

+2

Câu trả lời hay. Chỉ cần thêm vào đây cho IE, sử dụng '-ms-transform: scaleX (2);' – Riz

+0

Wow, NICE FIND !! – NoName

10

này đã làm việc một cách hoàn hảo đối với tôi

http://coding.vdhdesign.co.nz/?p=29

$VideoElement = $(_VideoElement); //Cache Jquery reference of this 
var iOriginalVideoHeight = _VideoElement.videoHeight; 
var iCurrentVideoHeight = $VideoElement.height(); 
var iVideoContainerHeight = $VideoElement.parent().height(); 
var iCurrentScale = iOriginalVideoHeight/iCurrentVideoHeight; 
var iScaleY = (iVideoContainerHeight/iOriginalVideoHeight)*iCurrentScale; 


//Important to note: Set the origin to the top left corner (0% 0%), or else the position of the video goes astray 
$VideoElement.css({ 
    "transform-origin": "0% 0%", 
    "transform":"scaleY(" + iScaleY +")", 
    "-ms-transform-origin" : "0% 0% ", /* IE 9 */ 
    "-ms-transform":"scaleY(" + iScaleY +")", /* IE 9 */ 
    "-moz-transform-origin" : "0% 0%", /* Firefox */ 
    "-moz-transform":"scaleY(" + iScaleY +")", /* Firefox */ 
    "-webkit-transform-origin": "0% 0%", /* Safari and Chrome */ 
    "-webkit-transform":"scaleY(" + iScaleY +")", /* Safari and Chrome */ 
    "-o-transform-origin":"0% 0%", /* Opera */ 
    "-o-transform":"scaleY(" + iScaleY +")" /* Opera */ 
});

Nguồn

2013-09-04 14:24:42

+1

Bạn là người duy nhất làm việc này như mọi người nên, tất cả những người khác đã đưa ra ví dụ nhưng nó không thực hiện công việc. Cảm ơn bạn đã chia sẻ. – YumYumYum

38

Tôi đã thử nghiệm bằng cách sử dụng đối tượng điều chỉnh kích thước: điền vào CSS

Làm việc tốt.

video { 
    object-fit: fill; 
}

Từ MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit):

Thuộc tính CSS đối tượng điều chỉnh kích thước quy định cụ thể như thế nào về nội dung của một yếu tố thay thế nên được lắp vào hộp thành lập bởi chiều cao và chiều rộng sử dụng của nó.

Value: điền

Nội dung thay thế được kích thước để điền vào hộp nội dung của phần tử: kích thước đối tượng cụ thể của đối tượng là chiều rộng và chiều cao sử dụng của phần tử.

Nguồn

2016-09-23 19:19:21

+0

Điều này rất goooooooood? xin vui lòng thêm nhiều hơn như thế này của nó hợp lệ hơn – YumYumYum

+0

Đẹp và đơn giản – Sudarshan

+0

Đây là một giải pháp tuyệt vời! – Vinodkumargb

2

Điều này sẽ không thay đổi tỷ lệ video của bạn nhưng sẽ loại bỏ các khoảng trống 'không được lấp đầy' ở đầu và cuối hoặc bên của trình xem video của bạn NẾU trình duyệt của bạn không hỗ trợ kiểu object-fit:cover.

Giả sử bạn có trình xem trong trang là 500x281 (thay đổi kích thước thích hợp từ 1280x720).Nhưng đôi khi bạn có thể nhận được một video không được chia tỷ lệ chính xác đến 16: 9, giả sử 1278x720 hoặc 320x176 như trong trường hợp của video 'Buck Bunny' trên trang web W3C. Sẽ thật tuyệt nếu video đã lấp đầy hoàn toàn vùng chứa và bạn không phải tạo vùng chứa mới cho mỗi video được cân đối không đúng cách.

Cho một đoạn mã như:

<style> 
#vidcontent { 
    width:500; 
    height:281; 
    border:2px solid #F00; 
    object-fit:cover; /* for those who do support it */ 
} 
</style> 

<video id="vidcontent" width="500" height="281" autoplay controls loop> 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
    Your browser does not support HTML5 video. 
</video>

sẽ làm một video với đường màu đen hoặc trắng ở phía trên và phía dưới tùy thuộc vào cách trình duyệt của bạn xử lý object-fit. Thêm mã JavaScript sau đây để thay đổi kích thước chiều cao bay của vùng chứa video khiến các dòng đó biến mất bằng cách buộc vùng chứa video của bạn khớp với video, ít nhất là theo chiều dọc.

<script type="text/javascript"> 
    vidContent = document.getElementById('vidcontent'); 
    vidContent.addEventListener("loadedmetadata", function(e) { 
    var newHeight = (vidContent.width/this.videoWidth) * this.videoHeight; 
    vidContent.style.height = parseInt(Math.ceil(newHeight)) + "px"; 
    }, false); 
</script>

Chúng tôi chia chiều rộng hiện tại của vùng chứa theo chiều rộng xác định của luồng video sau đó nhân với chiều cao xác định của luồng video. Điều đó dẫn đến chiều cao của container cần phải có hiệu lực như thế nào để làm sạch vừa khít nhất có thể.

Điều quan trọng là chiều cao và chiều rộng của video được đặt làm thuộc tính trong HTML ngoài định nghĩa CSS.

Nguồn

2017-01-26 16:45:32 TadLewis

Các vấn đề liên quan

 Các vấn đề liên quan