WEBサイト開発日記

PHPしかできないgmの開発メモです。

モバイル環境でのvideo.js-dailymotionのバグについて

久しぶりの記事ということで軽く


ある案件でフリーのプレイヤーフレームワークのvideo.jsを利用してるのですが、そこでdailymotionの動画を取り込みたいということでvideo.js-dailymotionというプラグインを使っている。

しかし、モバイル環境で動かすとなぜかシークバーが出てこないバグが発生することが分かったんですね。それだと動画を止められないっていうことで直すことに。。。

いきなり答えから申しますと

if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
 var ieVersion = Number(RegExp.$1);
 this.addIframeBlocker(ieVersion);
} else if (!/(iPad|iPhone|iPod|Android)/g.test(navigator.userAgent)) {
 // the pointer-events: none block the mobile player
 this.el_.className += ' onDesktop';
 this.addIframeBlocker();
}

これが問題のコードで、これはaddIframeBlocker()を呼び出しているわけだが、なぜかUAがモバイルだと条件的に呼び出されていない!
これは製作者の故意なのかミスなのか、わからないが修正しても動くので問題ないということで

修正版

if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
 var ieVersion = Number(RegExp.$1);
 this.addIframeBlocker(ieVersion);
} else if (!/(iPad|iPhone|iPod|Android)/g.test(navigator.userAgent)) {
 // the pointer-events: none block the mobile player
 this.el_.className += ' onDesktop';
 this.addIframeBlocker();
}else{
 this.addIframeBlocker();
}

と、まあこのように修正してみた。
しっかりシークバーも出るようになり他のバグもでていないので良しとしよう。