<p>サイトに埋め込んだ動画にjavascriptを使ってテロップを出す方法です、そもそも「動画に元からテロップ入れておけばいいじゃないか」ってことになってしまいますが&#8230;.。応用すればflashを使わずにvideoタグとjsで色々な事ができそうな気がします。</p>
<p><a class="demo" href="/demo/makabe/03/03demo.html">demo</a></p>
<p>方法としてはcurrentTimeプロパティを使って動画の現在尺に合わせた内容の文章を表示させています。</p>
<p>&nbsp;</p>
<h2>video ＋ javascript 現在の再生位置を表示する</h2>
<p>テロップの前にまず現在の再生位置（再生時間）を表示させてみます。</p>

		<div id="crayon-6495401585e10346975264" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
var video = document.getElementById("v");

v.addEventListener("timeupdate", function(){
		document.getElementById("time").innerHTML = v.currentTime;
	}, false);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495401585e10346975264-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e10346975264-2">2</div><div class="crayon-num" data-line="crayon-6495401585e10346975264-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e10346975264-4">4</div><div class="crayon-num" data-line="crayon-6495401585e10346975264-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495401585e10346975264-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">video</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">"v"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e10346975264-2">&nbsp;</div><div class="crayon-line" id="crayon-6495401585e10346975264-3"><span class="crayon-i">v</span><span class="crayon-sy">.</span><span class="crayon-e">addEventListener</span><span class="crayon-sy">(</span><span class="crayon-s">"timeupdate"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e10346975264-4"><span class="crayon-h">		</span><span class="crayon-i">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">"time"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">innerHTML</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">v</span><span class="crayon-sy">.</span><span class="crayon-i">currentTime</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401585e10346975264-5"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>htmlは各ブラウザに対応した動画ファイルを挿入して、再生位置を表示するpタグを書いておきます。</p>

		<div id="crayon-6495401585e14689976927" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;video controls id="v"&gt;
&lt;source src="video/sample1.mp4"&gt;
&lt;source src="video/sample1.webm"&gt;
&lt;source src="video/sample1.ogg"&gt;
&lt;/video&gt;

&lt;p id="time"&gt;&lt;/p&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495401585e14689976927-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e14689976927-2">2</div><div class="crayon-num" data-line="crayon-6495401585e14689976927-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e14689976927-4">4</div><div class="crayon-num" data-line="crayon-6495401585e14689976927-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e14689976927-6">6</div><div class="crayon-num" data-line="crayon-6495401585e14689976927-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495401585e14689976927-1"><span class="crayon-h">&lt;</span><span class="crayon-e">video </span><span class="crayon-e">controls </span><span class="crayon-i">id</span>=<span class="crayon-s">"v"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e14689976927-2"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"video/sample1.mp4"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-6495401585e14689976927-3"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"video/sample1.webm"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e14689976927-4"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"video/sample1.ogg"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-6495401585e14689976927-5"><span class="crayon-h">&lt;</span>/<span class="crayon-i">video</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e14689976927-6">&nbsp;</div><div class="crayon-line" id="crayon-6495401585e14689976927-7"><span class="crayon-h">&lt;</span><span class="crayon-i">p</span><span class="crayon-h"> </span><span class="crayon-i">id</span>=<span class="crayon-s">"time"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">p</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>「timeupdate:再生位置が変更された」というイベントで処理をさせる事で常に再生時間を取得してくれます。</p>
<h2>video ＋ javascript 尺に合わせてテロップを出す</h2>
<p>if分で尺を限定する事で、画にあったテロップが出せます。</p>

		<div id="crayon-6495401585e15407812307" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
v.addEventListener("timeupdate", function(){
		if(video.currentTime &gt; 3){
			if(video.currentTime &lt; 8){
				document.getElementById("price").innerHTML = "シャンパン￥2800";
			}
		}
	}, false);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495401585e15407812307-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e15407812307-2">2</div><div class="crayon-num" data-line="crayon-6495401585e15407812307-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e15407812307-4">4</div><div class="crayon-num" data-line="crayon-6495401585e15407812307-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e15407812307-6">6</div><div class="crayon-num" data-line="crayon-6495401585e15407812307-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495401585e15407812307-1"><span class="crayon-i">v</span><span class="crayon-sy">.</span><span class="crayon-e">addEventListener</span><span class="crayon-sy">(</span><span class="crayon-s">"timeupdate"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e15407812307-2"><span class="crayon-h">		</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-i">video</span><span class="crayon-sy">.</span><span class="crayon-i">currentTime</span><span class="crayon-h"> </span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-cn">3</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-6495401585e15407812307-3"><span class="crayon-h">			</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-i">video</span><span class="crayon-sy">.</span><span class="crayon-i">currentTime</span><span class="crayon-h"> </span><span class="crayon-h">&lt;</span><span class="crayon-h"> </span><span class="crayon-cn">8</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e15407812307-4"><span class="crayon-h">				</span><span class="crayon-i">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">"price"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e ">innerHTML</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">"シャンパン￥2800"</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401585e15407812307-5"><span class="crayon-h">			</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e15407812307-6"><span class="crayon-h">		</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-6495401585e15407812307-7"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>htmlでテロップが表示される場所も作ります。</p>

		<div id="crayon-6495401585e17300405145" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;p id="price"&gt;&lt;/p&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495401585e17300405145-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495401585e17300405145-1"><span class="crayon-h">&lt;</span><span class="crayon-i">p</span><span class="crayon-h"> </span><span class="crayon-i">id</span>=<span class="crayon-s">"price"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">p</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>この方法を応用すれば、動画中の商品をクリックすれば商品ページに飛ぶようなインタラクティブなサイトが作れると思います。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

html5 video javascriptで動画のタイムにあわせてテロップを出す

video：動画自体をクリックで再生・停止させる

<p>背景に動画を設置しているサイトをよく見ると思います。</p>
<p>ページ全体に表示するのはcssだけでできるので、実装はかなりシンプルにできます。</p>
<h2>videoで動画を挿入する</h2>
<p></p>

		<div id="crayon-649540158539e622024199" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;video autoplay loop poster="image/sampleposter.jpg" id="sampleVideo"&gt;
&lt;source src="video/shinjuku.mp4" type="video/mp4"&gt;
&lt;source src="shinjuku.webm" type="video/webm"&gt;
&lt;source src="shinjuku.ogv" type="video/ogv"&gt;
&lt;/video&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540158539e622024199-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158539e622024199-2">2</div><div class="crayon-num" data-line="crayon-649540158539e622024199-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158539e622024199-4">4</div><div class="crayon-num" data-line="crayon-649540158539e622024199-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540158539e622024199-1"><span class="crayon-h">&lt;</span><span class="crayon-e">video </span><span class="crayon-e">autoplay </span><span class="crayon-e">loop </span><span class="crayon-i">poster</span>=<span class="crayon-s">"image/sampleposter.jpg"</span><span class="crayon-h"> </span><span class="crayon-i">id</span>=<span class="crayon-s">"sampleVideo"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158539e622024199-2"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"video/shinjuku.mp4"</span><span class="crayon-h"> </span><span class="crayon-i">type</span>=<span class="crayon-s">"video/mp4"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540158539e622024199-3"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"shinjuku.webm"</span><span class="crayon-h"> </span><span class="crayon-i">type</span>=<span class="crayon-s">"video/webm"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158539e622024199-4"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"shinjuku.ogv"</span><span class="crayon-h"> </span><span class="crayon-i">type</span>=<span class="crayon-s">"video/ogv"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540158539e622024199-5"><span class="crayon-h">&lt;</span>/<span class="crayon-i">video</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>autoplayにしておいて、videoに対応していないブラウザの為にposterを設定しておきます。</p>
<p>動画素材はブラウザによって形式が異なるので、mp4、webmの２つを用意する必要があります。</p>
<p>各ブラウザへの対応状況は以下を参考にしてください。</p>
<p><a href="/uploads-archive/2015/03/mp4.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-7166" src="/uploads-archive/2015/03/mp4.png" alt="mp4" width="326" height="190" srcset="/uploads-archive/2015/03/mp4.png 642w, /uploads-archive/2015/03/mp4-300x175.png 300w, /uploads-archive/2015/03/mp4-228x133.png 228w" sizes="(max-width: 326px) 100vw, 326px" /></a></p>
<p><a href="http://caniuse.com/#search=mp4">http://caniuse.com/#search=mp4</a></p>
<p><a href="/uploads-archive/2015/03/webm.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-7167" src="/uploads-archive/2015/03/webm.png" alt="webm" width="322" height="196" srcset="/uploads-archive/2015/03/webm.png 642w, /uploads-archive/2015/03/webm-300x183.png 300w, /uploads-archive/2015/03/webm-228x139.png 228w" sizes="(max-width: 322px) 100vw, 322px" /></a></p>
<p><a href="http://caniuse.com/#search=WebM">http://caniuse.com/#search=WebM</a></p>
<p>ファイルフォーマットの変換は編集ソフトで吐き出す際に変換できる場合もありますが、フリーのコンバーターも結構あるので探してみて下さい。</p>
<h2>動画を背景に設定する</h2>
<p></p>

		<div id="crayon-64954015853a2854513256" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">CSS</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
#sampleVideo {
  position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; z-index: -10;
  background: url(image/sampleposter.jpg) no-repeat;
  background-size: cover;
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954015853a2854513256-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015853a2854513256-2">2</div><div class="crayon-num" data-line="crayon-64954015853a2854513256-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015853a2854513256-4">4</div><div class="crayon-num" data-line="crayon-64954015853a2854513256-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015853a2854513256-6">6</div><div class="crayon-num" data-line="crayon-64954015853a2854513256-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954015853a2854513256-1"><span class="crayon-k ">#sampleVideo </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015853a2854513256-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">fixed</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">right</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">bottom</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015853a2854513256-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">min-width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">min-height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015853a2854513256-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">z-index</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">-10</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015853a2854513256-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-i ">image/sampleposter.jpg</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">no-repeat</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015853a2854513256-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">background-size</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">cover</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015853a2854513256-7"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>videoを右下に設置して、幅と高さをauto、さらに最少値をどちらも100%にします。</p>
<p>対応していないブラウザためにbackgroundに静止画を設置します。</p>
<p>&nbsp;</p>
<p>今回使用した動画はNHKのライブラリー（フリー）から持ってきたのでかなり粗いのですが、通常背景に設置する場合はHDで撮影した動画の方が良いと思います。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/makabe/01/01demo.html">DEMO</a></p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #Video

2015/04/08

2015/04/01

2015/03/25