ブログ

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

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

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

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

Javascript

[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>
[/javascript]

HTML

[html]
<p class="ipad_iphone_btn"><a href="#">iPad＆iPhone用のボタン</a></p>
<p class="pc_android_btn"><a href="#">PC＆Android用のボタン</a></p>
[/html]
HTML5が使えれば、こんなことをしなくても。。。