6

ウィンドウのサイズ変更でも常にフルサイズを表示するフルスクリーンのビデオ背景を作成しようとしています。

ここにサイトがあります： http://webkunst.comeze.com/test/

これは私が持っている問題です:

ワイド画面では次のように表示されます: http://webkunst.comeze.com/test/wide.png

縦画面では次のように表示されます: http://webkunst.comeze.com/test/vertical.png

ご覧のとおり、ビデオのサイズを画面全体に変更するのではなく、常にビデオにいくつかの黒いバーを配置します.

これは私のマークアップです:

           <div id="full-background">
                <video class="video-js vjs-fullscreen"  autoplay preload="auto"  poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
                    <source src="video/1.mp4" type='video/mp4' />
                </video>
            </div>

このCSSで：

#full-background {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}


.video-js.vjs-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  _position: absolute;
  /* IE6 Full-window (underscore hack) */

}

video.js プラグインを使用しています: http://videojs.com/

サイドやトップ/ボトムに黒いバーを表示せずにビデオをフルサイズにするアイデアと方法はありますか?

4

4 に答える 4

4

BigVideo.JSを試しましたか? Video.JS をコアとして使用し、その上に構築します。jQuery のみが必要です。

于 2013-01-08T17:57:18.410 に答える
0

メディア クエリを使用して、アスペクト比に応じて異なる CSS クラスを適用できますか?

私はワイドスクリーンのラップトップを使用しており、以下を使用してビデオをフルスクリーンにすることができます。

.video-js .vjs-tech {
width: 100% !important;
}

video {
    width:100%;
}

縦画面の場合、次を使用して高さを埋めることができます。 

.video-js .vjs-tech {
height:100% !important
}

video {
width:auto !important;
}

@media screen and (device-aspect-ratio: 16/9)したがって、さまざまなディメンションを適用するようなメディア クエリを使用できます。

于 2012-11-26T23:37:44.720 に答える
0

ここでは、デフォルトのビデオの幅と高さしか指定できないようです:

http://videojs.com/tag-builder/

ただし、さまざまな画面解像度を満たすためにビデオ自体を引き伸ばすことはできません。常に縦横比が維持されます。

ただし、黒いバーの代わりに色を指定できます。

.vjs-default-skin .vjs-play-progress { background: #900; }

またはスキン:

<video class="video-js my-custom-skin" ...>

ソース: https://github.com/zencoder/video-js/blob/master/docs/skins.md

于 2012-11-26T22:06:44.553 に答える