Brightcove
サポート+81 3 6453 7730
製品情報
ソリューション
リソース
企業情報
Search IconA magnifying glass icon.
お問い合わせ

戻る

By Nathan Veer

Sr. Technical Product Marketing Manager at Brightcove

ハウツー:動画の周りの黒いバーを消す方法

Media

皆さんも、どこかのウェブサイトで見たことがあるでしょう。きれいに制作されたビデオが、ページに埋め込まれていることがよくあります。でも、気になることがありますね。邪魔な黒いバーが、左右や上下に付いているのはなぜでしょうか。 動画の周りに黒いバーが付いているのは、「どうしたらいいのか分かっていません」と白状しているようなものです。大事な土地の大いなる無駄づかいでもあります。

こうした黒いバーが表示されるのは、プレーヤーと動画のアスペクト比が合っていないからです。 今の時代には、ほとんどのビデオは高解像度(HD)で撮影されています。HD の映像は、16:9 のアスペクト比を使用します。これは「ワイドスクリーン」と呼ばれ、4K、1080、720 のように呼ばれるさまざまな解像度があります。この 16:9 の比率は、幅方向に 16 ピクセル広がれば、それに対して高さも 9 ピクセルを追加するということを意味します。HD 革命以前には、4:3 のアスペクト比の標準解像度(SD)で動画を撮影していました。これは、動画が幅方向に 4 ピクセル広くなるのに対して、高さが 3 ピクセル増えるという意味です。

16:9 のプレーヤーで 4:3 の SD 動画を再生すると、左右に黒いバーが表示されます。実際、プレーヤーと動画の間で高さか幅のどちらかが 1 ピクセルずれていても、動画の周囲に黒いバーが表示されてしまいます。

解決法はあるでしょうか。ピクセル数と比率のややこしい問題は、本当はとても簡単に解決できるのです。誰かの Web サイトで誰かが作ったビデオを見て、その周囲に黒い線が表示されていれば、動画自体のアスペクト比に合わせてプレーヤーのサイズを調整するだけのことだというのは、すぐお分かりになるでしょう。

そのための難しい計算をするためのシンプルなスプレッドシートをご用意しています。動画の高さか幅を入力するだけで、16:9 のアスペクト比を守るためにもう 1 方のサイズをどうすべきが分かります。これで黒い線を消すことができます。

最後に、使用しているプレーヤーがレスポンシブに設定されていない場合、つまり、視聴しているデバイスに合わせてサイズが自動的に変更される機能が無い場合は、スプレッドシートで出した正確なサイズを入力すると良いでしょう。(注:スマートプレーヤーは、レスポンシブに設定する必要がありますBrightcove Player にはレスポンシブな機能がありますが、必要であれば固定の高さと幅に設定することも可能です)

プレーヤーのアスペクト比の設定は、それほど簡単なことなのです。プレーヤーのサイズを正しく設定すれば、もう黒いバーが目の前に現れることは一切なくなるでしょう。

ここでご紹介したちょっとしたコツを、ご自身のウェブサイトや他のどこかに公開したときに、動画をプロらしく見せるのに役立てていただければ幸いです。


トップに戻る