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


93

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

1
属性に「%」を使用できないと思います。ただし、100に変更しても問題は解決しません。私はその-webkitメディアスタイルをベットします。それらを介して選択すること自由に感じtrac.webkit.org/browser/trunk/Source/WebCore/css/...
アルバート・

@albert、ありがとうposterございます。送信したリンクに参照が表示されていません。CSSがあなたが話しているものに対してどのように見えるか、つまり " -webkit media style" を見せていただけますか?感謝
ティムピーターソン

まあそれは私が「ピッキング」によって意味したものです。これらは、クロム固有のメディアスタイルです。私はそれらに漠然と精通しているだけで、彼らが宣言している疑似セレクターは言うまでもありません。出発点なし:パディング付きの宣言などを探します
albert

回答:


49

透明なポスター画像をCSS背景画像と組み合わせて使用​​すると、これを実現できます()。ただし、動画の高さと幅に合わせて背景を拡大するには、絶対配置の<img>タグ使用する必要があります()。

対応しているブラウザで設定background-sizeする100% 100%ことも可能です()。 background-size


更新

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

使用する

object-fit: cover;

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

object-fit: fill;

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


-@ user1419007、あなたの例は背景画像を繰り返します。これが最善の方法ではないことを示唆しているので、2番目の戦略を実装する方法を示すjsfiddleを提供してもらえますか?
ティム・ピーターソン、

no-repeat背景画像を編集しました。他の解決策については、これを解決する時間を与えてください。
user2428118

編集:2番目に提案されたソリューションの例を追加しました。
user2428118

そのおかげで、z-index再生を開始したときにビデオが表示されるように画像のを変更するには、JavaScriptが必要です。
ティム・ピーターソン、

2
.. 2番目の例はChromeで動作しませんでしたか?外側のdivにjsfiddle.net/xh8erのような位置を与える必要があります。その後、動作します。
commonpike 2014年

87

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

object-fit: cover;

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


3
これは間違いなく答えです。
cilphex 2016年

1
オブジェクトフィットプロパティへのリンクの+1 object-fit: initial
FireBrand

「オブジェクトフィット:塗りつぶし」がコツです!「object-fit:initial」のように(奇妙なことに、developer.mozilla.org / en-US / docs / Web / CSS / object-fitの仕様に「initial」値が表示されないためです)。「カバー」と「封じ込め」の両方で、Android 5.1.1のSamsungネイティブブラウザーでのポスターの再生を歪めました。そして、IEには影響しません!
plugincontainer 2018年

1
オブジェクトフィットルールの対象とするCSSセレクターは何ですか?ポスター画像をターゲットにする方法がないので、使用したと思いますvideo{object-fit: cover;}か?
zıəsuɐɟəʇs

@zıəsuɐɟəʇs私のcssでは... video [poster] {object-fit:fill}
plugincontainer

27

または、単に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>

2
より良い答え。それは何も壊しません、そして、それがビデオ中心のサイトでない限り、ビデオをプリロードしないことはあなたのページを本当に傷つけません。+1。
totallyNotLizards 2015年

1
携帯電話でプレイ中に背景のサイズを変更しました。他の質問/回答(例:stackoverflow.com/questions/18229974/…)から、問題は画像の重複(プレーヤーのcss背景とビデオ要素のポスター)のようです。この修正は機能しました。
plugincontainer

1
うーん... Chromeで動作しましたが、ネイティブのAndroidブラウザーで新しい問題を作成しました。参照:stackoverflow.com/questions/39546792/…–
plugincontainer

ついに修正-下記のLars Ericssonの回答を参照
plugincontainer 2018年

27

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

video{
   object-fit: inherit;
}

ありがとうございました!これは、上部と下部のビデオギャップを削除するために私が探していた正確な修正でした
cpcdev

11

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

それは、イメージ名または完全なパスでなければなりませんか?

サムスンのAndroidネイティブブラウザー(ブラウザーの名前は「インターネット」)では、ポスターのサイズが変更されています...壊滅的にプレイ中です。このソリューション-ポスターとしての透明なgifと背景としての「ポスター」-それを解決しました、しかし、.. IE-9、10または11でポスターが表示されなくなりました
plugincontainer

1
解決策は、背景として透明なgifとposter-as-backgroundを破棄し、ビデオ[上記のLars Ericssonの回答を参照]を使用することでした[poster] {object-fit:fill}。Android 5.1.1でのSamsungネイティブブラウザの問題を解決しました。そしてIEは問題なくポスターを表示します
plugincontainer 2018年

このアプローチは、特にモバイルに適しています。コンテンツの読み込み中にAndroidで発生object-fitするのワイルドサイズの歪みを防ぐことはできませんposter
TheLinguist

5

私はこのアイデアを思いつき、それは完全に機能します。わかりましたので、基本的には、最初のフレームをディスプレイから削除し、次にポスターのサイズをビデオの実際のサイズに変更します。次にディメンションを設定すると、これらのタスクの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);
}

それは賢い、私はそれに打撃を与えた。これは完璧なしかし、そこに得ていないのです... jsfiddle.net/trpeters1/NJtc9
ティム・ピーターソン

うん、君のいうとおりだ。あなたのjsfiddleを見ると、ビデオの要素だけでなく、ビデオの寸法も正しくなければならないことがわかりました。私のページで試してみたとき、私はラッキーだったと思います。
ジョナサンJ

5
<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*/
}

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


1

同様の問題があり、ビデオと同じアスペクト比(16:9)の画像を作成して修正しました。ビデオタグで幅が100%に設定され、画像(320 x 180)が完全にフィットします。お役に立てば幸いです。


1

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

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

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>

これで、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;
}
}

実際、iOS 10以降では、playsinline属性を使用して動画の自動再生機能をサポートしています。
Lukas Petr

その属性をどのように指定しますか?
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

これはうまくいった

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

そして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>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.