Buat poster video HTML5 seukuran dengan video itu sendiri


95

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

1
saya tidak berpikir Anda dapat menggunakan "%" di atribut; namun mengubahnya menjadi 100 tidak memperbaiki masalah. Saya yakin ini adalah gaya media -webkit. jangan ragu untuk memilihnya trac.webkit.org/browser/trunk/Source/WebCore/css/…
albert

@albert, terima kasih, saya tidak melihat referensi ke posterdalam tautan yang Anda kirim. Dapatkah Anda menunjukkan kepada saya seperti apa tampilan CSS untuk apa yang Anda bicarakan, yaitu, " -webkit media style"? terima kasih
tim peterson

baik itulah yang saya maksud dengan "memetik"; itu adalah gaya media khusus chrome; saya hanya secara samar-samar mengenal mereka, apalagi pemilih semu yang mereka nyatakan; tanpa titik awal: saya akan mencari deklarasi dengan padding, dll.
albert

Jawaban:


51

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


- @ user1419007, contoh Anda mengulang gambar latar belakang. Karena Anda menyarankan ini bukan cara terbaik, maukah Anda memberikan jsfiddle yang mendemonstrasikan cara menerapkan strategi kedua Anda?
tim peterson

Saya telah no-repeatmengedit gambar latar belakang. Adapun solusi lainnya, beri saya waktu sejenak untuk menyelesaikannya.
pengguna2428118

Edit: contoh tambahan untuk solusi yang diusulkan kedua.
pengguna2428118

terima kasih untuk itu, kami membutuhkan beberapa javascript untuk mengubah z-indexgambar sehingga video terlihat saat Anda mulai memutarnya.
tim peterson

2
.. contoh kedua tidak berfungsi di chrome? Anda harus memberikan posisi div luar seperti jsfiddle.net/xh8er ; lalu berhasil.
commonpike

88

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 .


3
Ini pasti jawabannya.
cilphex

1
+1 untuk tautan ke properti object-fit , menggunakan object-fit: initialmelakukannya untuk saya.
FireBrand

"object-fit: fill" berhasil! seperti halnya "object-fit: initial" (anehnya, karena saya tidak melihat nilai "awal" dalam spesifikasi di developer.mozilla.org/en-US/docs/Web/CSS/object-fit ). Baik "sampul" dan "berisi" mendistorsi poster yang sedang diputar di browser asli Samsung di bawah android 5.1.1. Dan tidak mempengaruhi IE!
plugincontainer

1
Pemilih css apa yang Anda targetkan untuk aturan objek-fit? Karena tidak ada cara untuk menargetkan gambar poster, apakah Anda sudah menggunakannya video{object-fit: cover;}?
zıəs uɐɟəʇs

@ zıəs uɐɟəʇs In my css it's ... video [poster] {object-fit: fill}
plugincontainer

27

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>

2
jawaban yang lebih baik. tidak merusak apa pun, dan tidak melakukan pramuat video tidak benar-benar merugikan halaman Anda kecuali situs tersebut adalah situs yang berfokus pada video. +1.
Benar

1
Saya memiliki pengubahan ukuran latar belakang saat bermain di ponsel. Dari pertanyaan / jawaban lain di sini (misalnya stackoverflow.com/questions/18229974/… ) tampaknya masalahnya adalah duplikasi gambar (latar belakang css pemutar dan poster elemen video). Perbaikan ini berhasil.
plugincontainer

1
Hmm ... berfungsi di Chrome tetapi membuat masalah baru di browser asli Android. Lihat: stackoverflow.com/questions/39546792/…
plugincontainer

Akhirnya diperbaiki - lihat jawaban Lars Ericsson di bawah
plugincontainer

27

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

Terima kasih! Ini adalah perbaikan yang tepat yang saya cari untuk MENGHAPUS celah video di atas dan bawah
cpcdev

12

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>

Apakah hanya harus berupa nama gambar atau jalur lengkap?

Di browser asli android (browser bernama "Internet") di samsung saya, ukuran poster diubah ... serempak saat diputar. Solusi ini - gif transparan sebagai poster dan "poster" sebagai latar belakang - memecahkan bahwa, TAPI, .. sekarang poster tidak ditampilkan di IE-9, 10, atau 11.
plugincontainer

1
Solusinya adalah meninggalkan gif transparan dan poster-as-background dan menggunakan (lihat jawaban Lars Ericsson di atas) video [poster] {object-fit: fill}. Masalah yang dipecahkan pada browser asli Samsung di bawah Android 5.1.1. dan IE menampilkan poster tanpa masalah
plugincontainer

Pendekatan ini lebih baik terutama untuk seluler. object-fittidak mencegah distorsi ukuran liar posteryang terjadi di Android saat konten masih dimuat.
TheLinguist

5

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

itu pintar, saya mencobanya. Ini tidak sempurna tapi menuju ke sana ... jsfiddle.net/trpeters1/NJtc9
tim peterson

Ya, kamu benar. Dengan melihat jsfiddle Anda, saya sekarang menyadari bahwa dimensi video juga harus benar dan bukan hanya elemen video. Saya kira saya hanya beruntung ketika saya mencobanya di halaman saya.
Jonathan J

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


1

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!


1

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

1

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

Sebenarnya, iOS 10+ mendukung fungsionalitas putar otomatis video dengan atribut playsinline.
Lukas Petr

Bagaimana Anda menentukan atribut itu?
Khom Nazid

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

0

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

0
  <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>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.