iPadのSafariから映像を出力する
前にも書いたように、VGAアダプターはiPadに表示されている画面をそのまま出力するわけではありません。Safariでも状況は同じで、現在表示しているWebページがVGAディスプレイに表示されるわけではありません。ページが表示されないのにSafariで動画を再生するのはおかしいのでは？ と思うかもしれませんね。
実はHTML5 Videoを使った動画をSafariで再生すると、自動的に動画部分のみがVGAアダプターを通じて外部ディスプレイに表示されます。VGAアダプターに出力されるのは再生中の動画だけで、文字や画像などの他の要素は出力されません。このため、動画を外部ディスプレイに表示したいときは、以下のようにHTML5のvideo要素を書くだけで済みます。逆にいえば、外部ディスプレイには表示したくない注意書きや説明などをページ内に書いても構いません。
デジタルサイネージの場合、繰り返し再生するのが一般的ですので、video要素にはloopを指定しておきます。これで動画がエンドレスで繰り返し再生されます。
ただし、iPadのSafariはvideo要素のautoplay属性に対応していないため、自動再生はできません。ユーザーが一度、iPad上で再生ボタンを押す必要があります。
iPad上の再生ボタンをタッチするとVGAディスプレイに映像が表示される
●サンプル01[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML5 Video + iPad + VGA Adapter</title>
</head>
<body>
<h1>HTML5 Video + iPad + VGA Adapter</h1>
<video id="myVideo"
src="movie/sample.mov"
width="1024"
height="512"
loop controls
></video>
<p>同じ映像を繰り返し再生します。</p>
</body>
</html>
