jquery - jquery を使用してモバイル デバイスで Vimeo ビデオを再生する

Question

私は Vimeo ビデオを再生する必要があるプロジェクトに取り組んでおり、PrettyPhotoライブラリを使用することを好みます。

Vimeoビデオを開くと問題が発生し、「ページの読み込みエラー」というエラーが発生し、その後、ビデオはエラーなしでスムーズに再生されます。この状況をなんとかしたい。

Jquery(version 1.6.2)参照とJquerymobile参照によるものではないかと調べています。

ヘルプはありますか？私はそれで立ち往生しています。

Answer 1

これが私のソリューションの機能です。jQuery を介してモバイル デバイスを検出し、埋め込まれた Vimeo ビデオ プレーヤーを携帯電話用の Vimeo Web サイトへの適切なリンクに置き換えます。

1 - モバイルを検出

Detect Mobile Browsers (dotcom) から jQuery スクリプトをダウンロードし、jQuery を読み込んだ直後に自分の Web サイトに追加しました。

<script language="javascript" type="text/javascript"
  src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script language="javascript" type="text/javascript" src="[path]/detectmobilebrowser.js"></script>

このスクリプトは新しいプロパティ を作成しますjQuery.browser.mobile。これは、ブラウザがモバイル デバイスの場合に true になります。

2 - すべての Vimeo iFrame を、適切なビデオを指す Vimeo for Mobile への適切なリンクに置き換えます。

これがコードです。jQuery の ready 関数の中に入れるだけで完了です。関数内に配置して、必要に応じていつでも関数を起動することもできます。

if (jQuery.browser.mobile == true) {
$('iframe').each(function() {
if ($(this).attr('src').indexOf('http://player.vimeo.com') != -1) {
var videoiFrame;
videoiFrame = {
height : $(this).height(),
width: $(this).width(),
src : $(this).attr('src')
}
// Find video code
var videoCode = videoiFrame.src.split('?');
videoCode = videoCode[0];
videoCode = videoCode.split('/');
videoCode = videoCode[(videoCode.length -1)];
// videoCode found, now replace iFrame
$(this).before('<a class="mobile-video"
  style="width: '+ videoiFrame.width +'px ; height: '+ videoiFrame.height+'px;
    line-height: '+ videoiFrame.height+'px;"
  href="http://www.vimeo.com/m/'+ videoCode + '"></a>');
$(this).remove();
}
});
}

以上です。Nokia Lumia 800 (iPhone と同じように Flash がありません) で正常にテストされました。