Có ai biết cách thay đổi kích thước của áp phích video HTML5 sao cho phù hợp với kích thước chính xác của chính video đó không?

đây là jsfiddle hiển thị sự cố: http://jsfiddle.net/zPacg/7/

đây là mã đó:

HTML:

<video controls width="100%" height="100%"  poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png">
  <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.ogg" type="video/ogg" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webm" />
</video>​

CSS:

video{
border:1px solid red;
}​

Lưu ý rằng hình chữ nhật màu cam không chia tỷ lệ theo đường viền màu đỏ của video.

Ngoài ra, chỉ thêm CSS bên dưới cũng không hoạt động vì nó thay đổi tỷ lệ video cùng với áp phích:

video[poster]{
height:100%;
width:100%;
}

Bạn có thể sử dụng hình ảnh áp phích trong suốt kết hợp với hình nền CSS để đạt được điều này ( ví dụ ); tuy nhiên, để có nền được kéo dài theo chiều cao và chiều rộng của video, bạn sẽ phải sử dụng <img>thẻ được định vị tuyệt đối ( ví dụ ).

Nó cũng có thể đặt background-sizethành100% 100% trong các trình duyệt hỗ trợbackground-size ( ví dụ ).

Cập nhật

Cách tốt hơn để làm điều này là sử dụng thuộc tính object-fitCSS như @Lars Ericsson gợi ý.

Sử dụng

object-fit: cover;

nếu bạn không muốn hiển thị những phần hình ảnh không phù hợp với tỷ lệ khung hình của video và

object-fit: fill;

để kéo dài hình ảnh cho vừa với tỷ lệ khung hình của video

Thí dụ

Tùy thuộc vào trình duyệt bạn đang nhắm mục tiêu, bạn có thể sử dụng thuộc tính object-fit để giải quyết vấn đề này:

object-fit: cover;

hoặc có thể filllà những gì bạn đang tìm kiếm. Vẫn đang được xem xét cho IE .

Hoặc bạn có thể sử dụng preload="none"thuộc tính simple để hiển thị nền VIDEO. Và bạn có thể sử dụng background-size: cover;tại đây.

 video {
   background: transparent url('video-image.jpg') 50% 50% / cover no-repeat ;
 }

 <video preload="none" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
 </video>

Tôi đã thử với điều này và đã thử tất cả các giải pháp, cuối cùng giải pháp mà tôi đi đến là một đề xuất từ ​​Thanh tra của Google Chrome. Nếu bạn thêm cái này vào CSS của mình, nó có tác dụng với tôi:

video{
   object-fit: inherit;
}

Giải pháp của tôi kết hợp câu trả lời của user2428118 và Veiko Jääger, cho phép tải trước nhưng không yêu cầu hình ảnh minh bạch riêng biệt. Thay vào đó, chúng tôi sử dụng hình ảnh trong suốt 1px được mã hóa base64.

<style type="text/css" >
    video{
        background: transparent url("poster.jpg") 50% 50% / cover no-repeat ;
    }
</style>
<video controls poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" >
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</video>

Tôi đã đưa ra ý tưởng này và nó hoạt động hoàn hảo. Về cơ bản, chúng tôi muốn loại bỏ khung hình đầu tiên của video khỏi màn hình và sau đó thay đổi kích thước của áp phích thành kích thước thực của video. Nếu sau đó chúng ta thiết lập các kích thước, chúng ta đã hoàn thành một trong những nhiệm vụ này. Sau đó chỉ còn lại một. Vì vậy, bây giờ, cách duy nhất tôi biết để loại bỏ khung hình đầu tiên là xác định thực sự một áp phích. Tuy nhiên, chúng tôi sẽ cung cấp cho video một video giả, một video không tồn tại. Điều này sẽ dẫn đến một màn hình trống với nền trong suốt. Tức là nền của div mẹ của chúng ta sẽ được hiển thị.

Dễ sử dụng, tuy nhiên, nó có thể không hoạt động với tất cả các trình duyệt web nếu bạn muốn thay đổi kích thước của nền div thành kích thước của video vì mã của tôi đang sử dụng "background-size".

HTML / HTML5:

<div class="video_poster">
    <video poster="dasdsadsakaslmklda.jpg" controls>
        <source src="videos/myvideo.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
<div>

CSS:

video{
    width:694px;
    height:390px;
}
.video_poster{
    width:694px;
    height:390px;
    background-size:694px 390px;
    background-image:url(images/myvideo_poster.jpg);
}

<video src="videofile.webm" poster="posterimage.jpg" controls preload="metadata">
    Sorry, your browser doesn't support embedded videos.
</video>

Che

video{
   object-fit: cover; /*to cover all the box*/
}

Lấp đầy

video{
   object-fit: fill; /*to add black content at top and bottom*/
   object-position: 0 -14px; /* to center our image*/
}

Lưu ý rằng các điều khiển video nằm trên hình ảnh của chúng tôi , vì vậy hình ảnh của chúng tôi không được hiển thị đầy đủ. Nếu bạn đang sử dụng bìa phù hợp với đối tượng, hãy chỉnh sửa hình ảnh của bạn trên ứng dụng trực quan dưới dạng photoshop và thêm nội dung bên dưới lề.

Tôi đã gặp sự cố tương tự và chỉ cần khắc phục bằng cách tạo hình ảnh có cùng tỷ lệ khung hình với video của tôi (16: 9). Chiều rộng của tôi được đặt thành 100% trên thẻ video và bây giờ hình ảnh (320 x 180) hoàn toàn phù hợp. Hy vọng rằng sẽ giúp!

Bạn có thể thay đổi kích thước kích thước hình ảnh sau khi tạo ngón tay cái

exec("ffmpeg -i $video_image_dir/out.png -vf scale=320:240 {$video_image_dir}/resize.png",$out2, $return2);

Bạn có thể sử dụng áp phích để hiển thị hình ảnh thay vì video trên thiết bị di động (hoặc các thiết bị không hỗ trợ chức năng tự động phát video). Vì thiết bị di động không hỗ trợ chức năng tự động phát video.

<div id="wrap_video">
<video preload="preload" id="Video" autoplay="autoplay" loop="loop" poster="default.jpg">
<source src="Videos.mp4" type="video/mp4">
Your browser does not support the <code>video</code> tag.
</video>
</div>

Giờ đây, bạn có thể chỉ cần tạo kiểu cho thuộc tính áp phích nằm bên trong thẻ video dành cho thiết bị di động thông qua truy vấn phương tiện.

#wrap_video
{
width:480px;
height:360px;
position: relative;
} 
@media (min-width:360px) and (max-width:780px)
{
video[poster]
{
top:0 !important;
left:0 !important;
width:480px !important;
height:360px !important;
position: absolute !important;
}
}

height:500px;
min-width:100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size:100% 100%;
object-fit:cover;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;

Điều này đã làm việc

<video class="video-box" poster="/" controls>
    <source src="some source" type="video/mp4">
</video>

Và CSS

.video-box{
 background-image: 'some image';
 background-size: cover;
}

  <div class="container">
        <video poster="~/Content/WebSite/img/SiteSetting/Load.gif" autoplay muted loop class="myVideo">
            <source src="~/Content/WebSite/images/VideoTube.mp4" type="video/mp4" />
        </video>

    </div>



 <style>
    .myVideo {
position: absolute;
right: 0;
left: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
object-fit: inherit;
 }
@media only screen and (max-width:768px) {
.myVideo {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: -webkit-fill-available;
    min-height: 100%;
    object-fit: cover;
    }
   }

     @media only screen and (max-width:320px) {
.myVideo {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: -webkit-fill-available;
    min-height: 100%;
    object-fit: cover;
  }
}
</style>