videoObject.posterは、埋め込み動画（video要素）のposter属性の値を取得、もしくは、設定するプロパティ。
poster属性には、ドキュメントに埋め込む動画ファイルの代わりに表示する画像ファイルのURLを指定できる。poster属性に指定した画像ファイルは、動画を再生する前や、動画ファイルが見付からなかった場合に表示する。
JavaScriptを使いposter属性値を変更することで、動的に、代わりに表示する画像ファイルを切り替えることができる。
構文
取得
var $poster = $videoElementReference.poster;
戻り値
video要素のposter属性の値。動画ファイルの代わりに表示する画像ファイルのURL。
設定
$videoElementReference.poster = "URL";
- URL
- 動画ファイルの代わりに表示する画像ファイルのURLを指定する。
サンプル
video要素のposter属性の値：
サンプルの動作について
2014/02/01現在、Chromeでのみ動作確認。
「１」～「３」のボタンをクリックすると、動画ファイルの代わりに表示する画像ファイルを切り替える。「video要素のposter属性の値：」の右横に、代わりに表示する画像ファイルのURLを表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setPoster( $poster ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.poster = $poster;
var $poster = $elementReference.poster;
document.getElementById( "sampleOutput" ).innerHTML = $poster;
}
</script>
function setPoster( $poster ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.poster = $poster;
var $poster = $elementReference.poster;
document.getElementById( "sampleOutput" ).innerHTML = $poster;
}
</script>
HTML
<p>
<button onclick="setPoster('http://alphasis.info/wp-content/uploads/2014/01/javascript-dom-video-sample-background.png');">１</button>
<button onclick="setPoster('http://alphasis.info/wp-content/uploads/2014/01/javascript-dom-video-sample2-background.png');">２</button>
<button onclick="setPoster('http://alphasis.info/wp-content/uploads/2014/01/javascript-dom-video-sample3-background.png');">３</button>
</p>
<p>video要素のposter属性の値：<span id="sampleOutput"></span></p>
<video src="http://alphasis.info/wp-content/uploads/2014/01/javascript-dom-video-sample.mp4" poster="http://alphasis.info/wp-content/uploads/2014/01/javascript-dom-video-sample-background.png" id="sample" controls>
<p>お使いのブラウザはvideo要素に対応していません。</p>
</video>
<button onclick="setPoster('http://alphasis.info/wp-content/uploads/2014/01/javascript-dom-video-sample-background.png');">１</button>
<button onclick="setPoster('http://alphasis.info/wp-content/uploads/2014/01/javascript-dom-video-sample2-background.png');">２</button>
<button onclick="setPoster('http://alphasis.info/wp-content/uploads/2014/01/javascript-dom-video-sample3-background.png');">３</button>
</p>
<p>video要素のposter属性の値：<span id="sampleOutput"></span></p>
<video src="http://alphasis.info/wp-content/uploads/2014/01/javascript-dom-video-sample.mp4" poster="http://alphasis.info/wp-content/uploads/2014/01/javascript-dom-video-sample-background.png" id="sample" controls>
<p>お使いのブラウザはvideo要素に対応していません。</p>
</video>