拡大し、ビデオからレターボックスを削除する方法 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
msZoom プロパティを使って、ビデオを拡大し、レンダリングされたビデオからレターボックスまたはピラーボックスを削除できます。
手順
msZoom 属性を使う
ビデオ フレームのネイティブな縦横比 (videoWidth 属性および videoHeight 属性で定義される比率) が Video タグの縦横比 (width 属性および height 属性で定義される比率) に一致しない場合、ビデオはレターボックスまたはピラーボックスの形式でレンダリングされます。 レターボックスおよびピラーボックスは、ビデオの左右または上下の黒いバーです。
msZoom 属性が True に設定されている場合、レンダリングされたビデオは Video オブジェクトのサイズに合わせてトリミングされます。 ビデオの上下または左右がトリミングされます。
たとえば、video タグのレイアウト領域は 4:3 の縦横比であるが、着信するストリームの縦横比が 16:9 の場合は、msZoom オプションを使って、16:9 のビデオを 4:3 の縦横比でレンダリングできます。レンダリングされたビデオでは、Video オブジェクトのすべての領域が利用されます。
この例では、Video オブジェクトを取得し、msZoom プロパティを True に設定しています。
<script type="text/javascript">
var myVideo = document.getElementById("videoTag1");
myVideo.msZoom = true;
myVideo.play();
</script>