web-dev-qa-db-ja.com

HTML5ビデオポスターをビデオ自体と同じサイズにする

ビデオ自体の正確なサイズに合うように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%;
}
csshtml5attributeshtml5-video
72
tim peterson

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

background-sizeを100% 100%に設定 in background-sizeをサポートするブラウザ （ 例 ） 。

31
user2428118

対象とするブラウザに応じて、 object-fit プロパティを使用してこれを解決できます。

object-fit: cover;

または、おそらくfillが探しているものです。それでも IEの検討中 。

77
Lars Ericsson

または、単に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>
27
Veiko Jääger

私はこれをいじってすべてのソリューションを試しましたが、最終的に私が行ったソリューションはGoogle Chromeのインスペクターからの提案でした。これをCSSに追加すると、うまくいきました：

video{
   object-fit: inherit;
}
20
patrick

私のソリューションは、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>
9
Jamie G

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

使い方は簡単ですが、divの背景のサイズをビデオのサイズに変更したい場合、私のコードは「background-size」を使用しているため、すべての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);
}
5
Jonathan J
<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*/
}

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

2
Daniel Eduardo Delgado Diaz

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

1
deebs

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

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

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

#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;
}
}
1
gopal sharma

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

exec("ffmpeg -i $video_image_dir/out.png -vf scale=320:240 {$video_image_dir}/resize.png",$out2, $return2);
1
Motilal Soni
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
Irinachen