107

ビデオ自体の正確な寸法に合うようにHTML5ビデオポスターのサイズを変更する方法を知っている人はいますか？

これが問題を示すjsfiddleです：http：//jsfiddle.net/zPacg/7/

そのコードは次のとおりです。

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

オレンジ色の長方形は、ビデオの赤い境界線に合わせて拡大縮小されないことに注意してください。

また、以下のCSSを追加するだけでは、ポスターと一緒にビデオを再スケーリングするため、機能しません。

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

14 に答える 14

93

ターゲットにしているブラウザによっては、object-fitプロパティを使用してこれを解決できます。

object-fit: cover;

または多分fillあなたが探しているものです。IEについてはまだ検討中です。

于 2015-06-25T07:43:05.423 に答える
69

これを実現するために、透明なポスター画像をCSS背景画像と組み合わせて使用​​できます（例）。ただし、背景をビデオの高さと幅に引き伸ばすには、絶対位置の<img>タグを使用する必要があります（例）。

（例）をサポートするブラウザでに設定background-sizeする100% 100%こともできます。 background-size

アップデート

これを行うためのより良い方法はobject-fit、@LarsEricssonが提案するようにCSSプロパティを使用することです。

使用する

object-fit: cover;

ビデオのアスペクト比に合わない画像の部分を表示したくない場合は、

object-fit: fill;

動画のアスペクト比に合わせて画像を引き伸ばす

例

于 2012-06-01T15:27:05.893 に答える
28

または、単にpreload="none"属性を使用して、ビデオの背景を表示することもできます。そして、ここで使用できbackground-size: cover;ます。

 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>
于 2015-01-16T10:18:43.500 に答える
27

私はこれをいじってすべての解決策を試しましたが、最終的に私が行った解決策はGoogleChromeのインスペクターからの提案でした。これをCSSに追加すると、うまくいきました。

video{
   object-fit: inherit;
}
于 2015-11-20T03:56:29.520 に答える
12

私のソリューションは、user2428118とVeikoJäägerの回答を組み合わせて、プリロードを可能にしますが、個別の透明な画像は必要ありません。代わりに、base64でエンコードされた1pxの透明な画像を使用します。

<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>
于 2016-03-16T12:04:41.603 に答える
6

私はこのアイデアを思いつきました、そしてそれは完璧に機能します。さて、基本的には、ディスプレイから最初のフレームのビデオを削除してから、ポスターのサイズをビデオの実際のサイズに変更します。次に寸法を設定すると、これらのタスクの1つが完了します。その後、1つだけが残ります。だから今、最初のフレームを取り除くために私が知っている唯一の方法は、実際にポスターを定義することです。ただし、ビデオには存在しない偽物を提供します。これにより、背景が透明な空白の表示になります。つまり、親divの背景が表示されます。

使い方は簡単ですが、私のコードは「background-size」を使用しているため、divの背景のサイズをビデオのサイズに変更する場合は、すべてのWebブラウザーで機能するとは限りません。

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);
}
于 2013-03-15T00:09:34.047 に答える
6 
<video src="videofile.webm" poster="posterimage.jpg" controls preload="metadata">
    Sorry, your browser doesn't support embedded videos.
</video>

カバー

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

塗りつぶし 

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

ビデオコントロールが画像の上にあるため、画像が完全に表示されないことに注意してください。オブジェクトフィットカバーを使用している場合は、フォトショップとしてビジュアルアプリで画像を編集し、余白の下のコンテンツを追加します。

于 2017-11-17T20:34:46.527 に答える
1

同様の問題が発生し、ビデオと同じアスペクト比（16：9）の画像を作成して修正しました。ビデオタグの幅が100％に設定され、画像（320 x 180）が完全にフィットするようになりました。お役に立てば幸いです。

于 2014-05-16T17:14:48.983 に答える
1

親指を生成した後、画像サイズのサイズを変更できます

exec("ffmpeg -i $video_image_dir/out.png -vf scale=320:240 {$video_image_dir}/resize.png",$out2, $return2);
于 2015-05-26T09:31:04.563 に答える
1

モバイルデバイス（またはビデオの自動再生機能をサポートしていないデバイス）で、ビデオの代わりにポスターを使用して画像を表示できます。モバイルデバイスはビデオ自動再生機能をサポートしていないためです。

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

これで、メディアクエリを介してモバイルデバイスのビデオタグ内にあるposter属性のスタイルを設定できます。

#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;
}
}
于 2016-11-04T11:13:36.513 に答える
1

追加のdivは必要ありません。

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[poster]{ object-fit:cover; }  /* or object-fit:fill */
于 2021-11-14T03:28:27.133 に答える
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;
于 2016-12-24T05:57:43.360 に答える
0

これはうまくいきました

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

そしてCSS

.video-box{
 background-image: 'some image';
 background-size: cover;
}
于 2019-10-28T16:11:04.590 に答える
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>
于 2019-11-30T01:33:59.807 に答える