Adakah yang tahu cara mengubah ukuran poster video HTML5 agar sesuai dengan dimensi video itu sendiri?

inilah jsfiddle yang menunjukkan masalahnya: http://jsfiddle.net/zPacg/7/

inilah kode itu:

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;
}​

Perhatikan bahwa persegi panjang oranye tidak berskala ke batas merah video.

Selain itu, hanya menambahkan CSS di bawah ini juga tidak berfungsi karena mengubah skala video bersama dengan poster:

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

Anda dapat menggunakan gambar poster transparan yang dikombinasikan dengan gambar latar belakang CSS untuk mencapai ini ( contoh ); namun, untuk memiliki latar belakang yang membentang ke tinggi dan lebar video, Anda harus menggunakan <img>tag yang benar-benar diposisikan ( contoh ).

Dimungkinkan juga untuk mengatur background-sizeke100% 100% dalam browser yang mendukungbackground-size ( contoh ).

Memperbarui

Cara yang lebih baik untuk melakukannya adalah dengan menggunakan object-fitproperti CSS seperti yang disarankan oleh @Lars Ericsson.

Menggunakan

object-fit: cover;

jika Anda tidak ingin menampilkan bagian gambar yang tidak sesuai dengan rasio aspek video, dan

object-fit: fill;

untuk meregangkan gambar agar sesuai dengan rasio aspek video Anda

Contoh

Bergantung pada browser apa yang Anda targetkan, Anda dapat menggunakan properti object-fit untuk menyelesaikan ini:

object-fit: cover;

atau mungkin fillitulah yang Anda cari. Masih dalam pertimbangan untuk IE .

Atau Anda dapat menggunakan preload="none"atribut sederhana untuk membuat latar belakang VIDEO terlihat. Dan Anda bisa menggunakannya di background-size: cover;sini.

 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>

Saya bermain-main dengan ini dan mencoba semua solusi, akhirnya solusi yang saya gunakan adalah saran dari Inspektur Google Chrome. Jika Anda menambahkan ini ke CSS Anda, itu berhasil untuk saya:

video{
   object-fit: inherit;
}

Solusi saya menggabungkan jawaban pengguna2428118 dan Veiko Jääger, memungkinkan pramuat tetapi tanpa memerlukan gambar transparan terpisah. Kami menggunakan gambar transparan 1px yang dikodekan base64 sebagai gantinya.

<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>

Saya mendapatkan ide ini dan berhasil dengan sempurna. Oke jadi pada dasarnya kami ingin menyingkirkan video frame pertama dari tampilan dan kemudian mengubah ukuran poster ke ukuran video sebenarnya. Jika kita kemudian mengatur dimensi kita telah menyelesaikan salah satu tugas ini. Maka hanya satu yang tersisa. Jadi sekarang, satu-satunya cara yang saya tahu untuk menghilangkan bingkai pertama adalah dengan mendefinisikan poster. Namun kami akan memberikan video palsu, yang tidak ada. Ini akan menghasilkan tampilan kosong dengan latar belakang transparan. Yaitu latar belakang div induk kita akan terlihat.

Mudah digunakan, namun mungkin tidak berfungsi dengan semua browser web jika Anda ingin mengubah ukuran dimensi latar belakang div ke dimensi video karena kode saya menggunakan "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>

Penutup

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

Mengisi

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

Perhatikan bahwa kontrol video ada di atas gambar kita , jadi gambar kita tidak ditampilkan secara lengkap. Jika Anda menggunakan sampul objek-fit, edit gambar Anda pada aplikasi visual sebagai photoshop dan tambahkan konten margin bawah.

Saya memiliki masalah serupa dan hanya memperbaikinya dengan membuat gambar dengan rasio aspek yang sama dengan video saya (16: 9). Lebar saya disetel ke 100% pada tag video dan sekarang gambarnya (320 x 180) sangat pas. Semoga membantu!

Anda dapat mengubah ukuran gambar setelah menghasilkan jempol

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

Anda dapat menggunakan poster untuk menampilkan gambar daripada video di perangkat seluler (atau perangkat yang tidak mendukung fungsi putar otomatis video). Karena perangkat seluler tidak mendukung fungsi putar otomatis 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>

Sekarang Anda bisa mengatur gaya atribut poster yang ada di dalam tag video untuk perangkat seluler melalui media-query.

#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;

Ini berhasil

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

Dan 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>