HTML5のVideoプレイヤーとFlashのビデオプレイヤーを併用し、いろいろな環境に合わせて動画再生を行える非常に便利なスクリプト「Video-js」。

私も多々利用させて頂いて居るのですが、ここにきてタイトル通りのバグ「ループ再生の2回目以降で、再生ボタンが表示されっぱなしになる」に遭遇し、解決したのでその方法を記載します。

まず、バグが発生する環境は下記の通り。

  • Video-jsのFlashプレイヤーで再生をしている
  • autoplayオプションをON
  • loopオプションをON
  • controlsオプションをON

HTML5のプレイヤーでも発生するかは未検証です。

原因

Video.jsでは動画の再生・停止などに合わせイベントを発行しており、内部の動作についてもそのイベントに依存して制御を行っているようです。

今回の問題はループ再生の場合にのみ発生するのですが、その発生機序としては下記のようなものでした。

  1. 1回目の動画再生が開始:playイベントが発生
  2. playコールバックの処理(1):「再生ボタン」が「display:none」になる
  3. 1回目の動画再生が終了:endedイベントが発生
  4. endedコールバックの処理(1):「ループ再生なら、再度最初から再生」という処理が実行される
  5. 2回目の動画再生が開始:playイベントが発生
  6. playコールバックの処理(1):「再生ボタン」が「display:none」になる
  7. endedイベントに登録された2つめ以降のコールバックが発生
  8. endedコールバックの処理(2):「再生ボタン」を再表示させる

要はコールバックの登録の順番が悪いというもので、endedイベントの最初のコールバックで再生処理を行ってしまっているものだから、endedイベントに登録された2個目以降のコールバックが、なぜかplayイベントの次に実行されるという訳のわからない状態に。

というわけで、このあたりのコードをさくっと修正すればバグも解消します。

コード修正

video.js(version 3.2.0現在)の926行目付近:

  init: function(player, options){
    this._super(player, options);

    player.addEvent("play", _V_.proxy(this, this.hide));
    player.addEvent("ended", _V_.proxy(this, this.show));
  },

下記のように改善します。

  init: function(player, options){
    this._super(player, options);

    player.addEvent("play", _V_.proxy(this, this.hide));
    
    if (!player.options.loop) {
      player.addEvent("ended", _V_.proxy(this, this.show));
    }
  },

要は「ループ指定がされていない場合のみ、再生終了時にボタンを再表示してねん」という処理に変更をかけます。

これで晴れて2回目以降の再生でも、再生ボタンがしっかり消えたままになります。

WordPress等を利用している場合に、コメントシステムとして大変人気のあるDISQUSというコメントシステムがあります。

詳しくは下記のサイトなどをご覧頂くとして、このDISQUSはPC向けだけでは無く、スマートフォンなどでも表示できるモバイルテーマが標準で附属しています。

しかしこのモバイルテーマ、なぜかPC向けと違い、FacebookやTwitterでログインする機能が省略されてしまっています。

かといってPC版のインターフェースをスマートフォンで利用しようとすると、コメント部分は普通に利用できるものの、ログインウィンドウが画面からはみ出してしまい、相当解像度の高いスマートフォンではないとログインに支障がでてしまいます。

スマートフォン向け対応できるCSSを書いた

DISQUSはAPIの管理画面から、独自にCSSを適用することが可能です。

そこで、PC向けのログインウィンドウをスマートフォンで見た際にも、綺麗に画面内に収まるようカスタムCSSを作成してみました。

CONTINUE READING

以前に作成した、特定のURLへのTwitterの投稿を一覧で取得できるjQueryプラグインを、さらに改造してみました。

前回のプラグインではツイートが多くなっても、100件までは全て取得して表示するような仕組みになっていたため、そのまま表示してしまうとページが縦に異常に長くなる現象が発生していました。

そこで、今回の改造で1ページに表示する件数を指定可能にし、さらにページネーションの仕組みを取り付けてみました

CONTINUE READING

Facebookのいいねボタンを設置して数日たったのですが、GoogleAnalyticsのアクセスログに異常な数の ?fb_xd_fragment=というクエリのついたアクセスが発生したため、その原因と解決策を調査したのでメモしておきます。

IE7以下 + Facebookいいねボタンのバグ

どうやらこれは、IE7以下でFacebookのいいねボタンが設置してあるページを閲覧した場合のバグのようで、IE8以上や他のモダンブラウザで閲覧した場合には、このアクセスログは残りません。

解決方法

根本的な解決方法はFacebook側のスクリプトを修正してもらう他なさそうですが、今更IE6や7のために修正されるとも思えません。

とりあえず実害としてはログが汚れるということだけなので、GoogleAnalyticsのフィルタ機能を使って、当該クエリをカウントしないように設定すれば問題なさそうです。

Analyticsでの設定方法は下記サイトが非常に詳しいので参考のこと。

JavaScriptの動作確認をしていて気づいたのですが、InternetExplorerのJavaScriptには、配列オブジェクトの indexOf メソッドが実装されていません。

すくなくともInternetExplorer8以下には存在していませんでした。
とりあえずForループで検索する方法で代替としたのですが、これは不便きわまりない・・・。

解決策

Forループで対応するか、下記サイトのようにArrayオブジェクトのprototypeを拡張する方法もあるようです。