• RSS

[JS]video タグの埋め込み動画をColorbox を使って再生する方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

前回の video タグでmp4 動画をサイトに埋め込む の方法で、video タグでmp4 動画を埋め込む方法を紹介させていただきましたが、今回は埋め込んだ動画をColorbox のインラインで表示(再生)させるカスタマイズのご紹介です。

Colorbox のダウンロード

以下のページからColorbox のファイル一式をダウンロードします。


Colorbox の設置

画像や動画、iframeも Lightbox 風に立ち上げる jQueryプラグイン「Colorbox」 の記事でも基本的な使い方を紹介させていただいておりますが、
jQuery ファイルと一緒に jquery.colorbox.js と colorbox.css のファイルを 内に設置します。
<link rel="stylesheet" type="text/css" href="./colorbox/colorbox.css" />
<script src="./jquery.js" ></script>
<script src="./colorbox/jquery.colorbox.js"></script><script>
$(document).ready(function(){
$(".inline").colorbox({inline:true});
$("#click").click(function(){ 
	$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
	return false;
	});
});
</script>


HTML 側の記述例

動画のサムネイル画像を用意した上で、再生させたい場所に以下のような記述を行います。
<!--サムネイル-->
<a class='inline' href="#inline_content">
<img src="thumbnail.jpg">
</a>

<!--インライン-->
<div style='display:none'>
<div id='inline_content'>
	<video wwidth="640" height="480" controls preload>
		<source src="sample.mp4" type="video/mp4">
		<source src="sample.ogg" type="video/ogg">
		<source src="sample.webm" type="video/webm">
		<p>ご利用のブラウザはvideo タグによる動画の再生に対応していません。</p>
	</video>
</div>    
</div>    

以下にColorbox を使った動画再生デモを設置しました。
video タグで埋め込んだmp4 動画をColorbox のインラインで表示するデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください