ブログ

元々は、ボタンをクリックするとjqueryのcolorboxが立ち上がり、Flashムービーが流れるようにしていたんですが、それだとiPad＆iPhoneで再生できない。。。

そこで、iPad＆iPhoneで閲覧した際には、「MP4の動画ファイルに直リンクしているボタン」を表示することにしました。

• PC＆Androidで閲覧した場合
  colorboxの起動＆Flashのムービーが再生されるボタンを表示
• iPad＆iPhoneで閲覧した場合
  MP4ファイルにリンクしたボタンを表示

以下が、サンプルコードです。

Javascript

<script type="text/javascript">

// iPad＆iPhone用のボタンを非表示
$('.ipad_iphone_btn').hide();

$(function(){

	// iPad＆iPhoneを判定
	var agent = navigator.userAgent;
	if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1){

	// iPad＆iPhone用のボタンを表示
	$('.ipad_iphone_btn').show();

	// PC＆Android用のボタンを非表示
	$('.pc_android_btn').hide();

	}
});
</script>

HTML

<p class="ipad_iphone_btn"><a href="#">iPad＆iPhone用のボタン</a></p>
<p class="pc_android_btn"><a href="#">PC＆Android用のボタン</a></p>

HTML5が使えれば、こんなことをしなくても。。。