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

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

• 投稿の編集 ‹ INSPIRE TECH — WordPress

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

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

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

.dsq-popup[id] {
	position: absolute !important;
}

.dsq-popup-container .dsq-popup-close {
	right: 5px;
	top: 5px;
	position: absolute !important;
	z-index: 1200 !important;
}

.dsq-popup-container .dsq-popup-title {
	position: relative !important;
}

.dsq-popup-container .dsq-popup-title h3 {
	font-size: 12px !important;
}

.dsq-popup .dsq-tabbed-modal {
	background: none !important;
}

#dsq-popup-message #dsq-login-disqus iframe {
	height: 300px !important;
}

.dsq-popup-body {
	width: auto !important;
}

.dsq-login-box .dsq-popup-body {
	width: 300px !important;
}

.dsq-popup .dsq-modal-tabs {
	width: auto !important;
	float: none !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li {
	float: left !important;
	width: 43px !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li a {
	padding: 4px 6px !important;
	text-align: center !important;
	font-size: 0px !important;
	border-bottom: none !important;
}

.dsq-popup .dsq-tab-container {
	padding: 10px !important;
	font-size: 12px !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li.dsq-active a {
	border-bottom: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
	background: #eee !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li.dsq-active a:hover {
	border-bottom: none !important;
}

適用方法

適用したいアカウントのアピアランスパネルを開きます。

スクロールして中ほどより下にある、Custom CSSの欄に上記コードを記述して保存します。

JavaScriptの設置

上記CSSだけではポップアップウィンドウの位置がおかしくなるため、下記JavaScriptを設置してください。

jQuery(function($) {
	setInterval(function() {
		$('#dsq-popup-message').css({
			'position': 'absolute',
			'top': $(window).scrollTop() + 10
		});
	}, 1000);
});

スマートフォンでの表示

こんな感じで表示されます。

注意

カスタムCSSはPC版にももれなく適用されてしまうため、PCとスマートフォンで利用する場合には、上記CSSにスマートフォンのみのクラス名やIDなどを追加するなどして、環境によって表示を切り替えられるよう工夫が必要です。

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

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

ソースコード

利用方法

ツイートの一覧を表示したいDOMオブジェクトを用意し、下記のように利用します。

$('#tweets').twitterTrackback();

オプション

下記のように、twitterTrackbackメソッドにオブジェクトを渡すことで、動作オプションを指定できます。

$('#tweets').twitterTrackback({ exclude: [ 'jyokyoku' ], renderCallback: renderTweets });

オプションの一覧

url (string)

ツイートを取得したいURLを指定します。デフォルトでは、スクリプトを設置したURLが利用されます。

wrapperTag (string)

ツイートの一覧を囲むタグを指定します。デフォルトではulです。

removeHash (boolean)

ツイートを取得するurlにハッシュが含まれる場合に、それを削除するかを指定します。デフォルトではtrueです。

renderCallback (function)

ツイートをレンダリングする関数を指定します。

pagerCallback (function)

ページャをレンダリングする関数を指定します。

pagerPos (string)

ページャを表示する位置を指定します。

• both – ツイート一覧の上下
• top – ツイート一覧の上
• bottom – ツイート一覧の下

perpage (integer)

1ページに表示するツイートの数を指定します。デフォルトでは10です。

noTrackback (string)

ツイートが1件も無い場合に表示するメッセージを指定します。デフォルトでは<p>Twitterからのトラックバックはありません。</p>が表示されます。

exclude (array)

ツイートを表示したくないユーザーIDを配列で指定します。

生成されるHTMLコード

renderCallbackオプションやpagerCallbackオプションに何も指定しない場合、下記のようなHTMLコードが生成されます。

適宜CSSを利用してスタイリングしてください。

ツイート一覧

<ul>
	<li class="tweet1">
		<a href="http://twitter.com/jyokyoku"><img src="http://a1.twimg.com/profile_images/1302945019/___normal.jpg" alt="家富正幸" width="48" /></a>
		<ul class="section">
			<li class="nick"><a href="http://twitter.com/jyokyoku">家富正幸</a></li>
			<li class="content">ツイートの内容が表示されます。</li>
			<li class="date"><a href="http://twitter.com/jyokyoku/status/xxxxxxxxxx">1 days ago</a></li>
		</ul>
	</li>
	<li class="tweet2">
		<a href="http://twitter.com/jyokyoku"><img src="http://a1.twimg.com/profile_images/1302945019/___normal.jpg" alt="家富正幸" width="48" /></a>
		<ul class="section">
			<li class="nick"><a href="http://twitter.com/jyokyoku">家富正幸</a></li>
			<li class="content">ツイートの内容が表示されます。</li>
			<li class="date"><a href="http://twitter.com/jyokyoku/status/xxxxxxxxxx">1 days ago</a></li>
		</ul>
	</li>
</ul>

ページャ

<div class="tweetPager">
	<span class="current">1</span>
	<span><a href="javascript:void();" onclick="jQuery.twitterTrackback.update(2); return false;">2</a></span>
</div>

コールバック関数を利用する

renderCallbackオプションやpagerCallbackオプションに適切な関数を渡すことで、表示されるツイートの内容やページャのコードを変更する事ができます。

renderCallbackオプションを指定する

renderCallbackオプションを指定する場合、引数を1つ取る関数を指定してください。
引数にはツイートの番号が数値で渡されます。

また、関数のthisスコープはツイートの情報が格納されたオブジェクトになるため、this.author.nameなどでツイートに関する情報を表示することができます。

デフォルトで実行される関数を載せておきます。

function renderHtml(n) {
	return (
		'<li class="tweet' + n + '">' +
			'<a href="' + this.author.url + '"><img src="' + this.author.photo_url + '" alt="' + this.author.name + '" width="48" /></a>' +
			'<ul class="section">' +
				'<li class="nick"><a href="' + this.author.url + '">' + this.author.nick + '</a></li>' +
				'<li class="content">' + this.content.replace(/((http:|https:)\/\/[\x21-\x7e]+)/gi, "<a href='$1'>$1</a>") + '</li>' +
				'<li class="date"><a href="' + this.permalink_url + '">' + this.date_alpha + '</a></li>' +
			'</ul>' +
		'</li>'
	);
}

pagerCallbackオプションを指定する

pagerCallbackオプションを指定する場合、引数を3つ取る関数を指定してください。
引数は下記の値が渡されます。

1. (integer) 現在のページ番号
2. (integer) 1ページにいくつツイートを表示するか
3. (integer) 現在のURLに対する全ツイート数

また、ページャで生成されたリンクがクリックされた場合には、必ず下記の関数を実行して、ツイート一覧を書き換えるようにしてください。

jQuery.twitterTrackback.update(pageNumber)

デフォルトで実行される関数を載せておきます。

function pagerHtml(current, perpage, total) {
	var totalPages = total / perpage;
	var links = '';

	for (var i = 1; i < totalPages; i++) {
		if (current != i) {
			links += '<span><a href="javascript:void();" onclick="jQuery.twitterTrackback.update(' + i + '); return false;">' + i + '</a></span>';

		} else {
			links += '<span class="current">' + i + '</span>'
		}
	}

	return (
		'<div class="tweetPager">' + links + '</div>'
	);
}

バグやご要望など

バグやご要望などありましたら、ツイッターかコメントフォーム、Facebook、またはお問い合わせフォームからご連絡ください。

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

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

解決方法

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

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

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

• いいね！ボタンを設置するとアクセス解析に支障が出る件 | SEO対策 e-search 公式ブログ

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

解決策

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

• あさのののーと » IEに配列のindexOfがない！

「@soraiyのjquery.twitterTrackback.jsを改良してみた。」で公開されているTwitterからのツイートを表示するjQueryプラグインに、さらに手を加えたものを作ったので、ここにおいておきます。

URLを自動取得に

元のスクリプトでは実行時にURLを指定しなくてはいけませんでしたが、これを location.half の値を使って自動取得に変更しました。

下記のように、オプションさえ指定しなければ引数無しで記述可能です。

$('#twitterTrackback').twitterTrackbackList();

removeHash オプションを指定することで、URLに含まれるハッシュを削除することができます。これは、ページ内リンクなどでURLにハッシュが含まれる場合、正しくツイートが取得できない問題を回避するためです。

$('#twitterTrackback').twitterTrackbackList({
    removeHash: true // デフォルトでtrue
});

レンダリング用のコールバック関数を指定できる

callback オプションにコールバック関数を指定することで、自由にHTMLを生成できるようにしました。
このサイトでは下記のような関数を使ってレンダリングしています。

$('#twitterTrackback').twitterTrackbackList({ callback: renderTweets });

function renderTweets(n) {
	return (
		'<li class="tweet' + n + '"><dl>' +
		'<dt><a href="' + this.author.url + '">' + this.author.nick + '</a></dt>' +
		'<dd class="date"><a href="' + this.permalink_url + '">' + this.date_alpha + '</a></dd>' +
		'<dd class="image"><a href="' + this.author.url + '"><img src="' + this.author.photo_url + '" alt="' + this.author.name + '" width="48" /></a></dd>' +
		'<dd class="content">' + this.content.replace(/((http:|https:)\/\/[\x21-\x7e]+)/gi, "<a href='$1'>$1</a>") + '</dd>' +
		'</dl></li>'
	);
}

コールバック関数の this スコープにはツイートの情報が入っていますので、HTMLと組み合わせて自由にデザインが可能です。

除外するユーザーを設定可能に

exclude オプションに除外したいユーザー名を配列で指定することで、そのユーザーからのツイートを非表示にします。
自分のツイートを非表示にする場合なんかに利用できます。

$('#twitterTrackback').twitterTrackbackList({ exclude: [ 'jyokyoku' ] });

ソースコード

こちらのリンクからダウンロードするか、下記ソースコードを保存して利用して下さい。

動作確認は下記環境で行っています。

• InternetExplorer7
• Firefox4
• Opera10

(function($) {
	jQuery.fn.twitterTrackbackList = function(options){
		var topsyOtterapi = 'http://otter.topsy.com/trackbacks.js';
		var self = this;
		var tweetHtml = '';

		function renderHtml(n) {
			return (
				'<li class="tweet' + n + '">' +
					'<a href="' + this.author.url + '"><img src="' + this.author.photo_url + '" alt="' + this.author.name + '" width="48" /></a>' +
					'<ul class="section">' +
						'<li class="nick"><a href="' + this.author.url + '">' + this.author.nick + '</a></li>' +
						'<li class="content">' + this.content.replace(/((http:|https:)\/\/[\x21-\x7e]+)/gi, "<a href='$1'>$1</a>") + '</li>' +
						'<li class="date"><a href="' + this.permalink_url + '">' + this.date_alpha + '</a></li>' +
					'</ul>' +
				'</li>'
			);
		}

		options = $.extend({
			url: window.location.href,
			wrapperTag: 'ul',
			removeHash: true,
			callback: renderHtml,
			noTrackback: '<p>Twitterからのトラックバックはありません。</p>',
			exclude: []
		}, options);

		if (options.removeHash) {
			options.url = options.url.replace(/#.+/, '');
		}

		jQuery.ajax({
			type: 'GET',
			url: topsyOtterapi,
			cache: false,
			dataType: 'jsonp',
			data: {
				perpage: '100',
				order: 'date',
				url: options.url
			},
			success: function(trackbackData) {
				if(trackbackData.response.list.length == 0) {
					tweetHtml += options.noTrackback;

				} else {
					jQuery.each(trackbackData.response.list, function(n) {
						for (var i = 0; i < options.exclude.length; i++) {
							if (options.exclude[i] != this.author.nick) {
								tweetHtml += options.callback.call(this, n);
							}
						}
					});

					if (!tweetHtml) {
						tweetHtml = options.noTrackback;

					} else if (options.wrapperTag) {
						tweetHtml = '<' + options.wrapperTag + '>' + tweetHtml + '</' + options.wrapperTag + '>';
					}
				}
				jQuery(self).append(tweetHtml);
			},
			complete: function() {}
		});
	};
})(jQuery);

不具合等があれば、コメントかツイッターで報告下さると有り難いです。

ただ、HTMLのstyle要素は記述が汚くなるから使いたくない、でもCSSでわざわざclassを作っているとCSSがごちゃごちゃしてしまう・・・。

そんな場合に、HTMLのclass要素を使って、簡単に幅と高さを指定できるJavaScriptを書いてみました。

ダウンロード

wh.js
※jQueryを利用しますので、別途jQuery 1.3.2以上のバージョンをダウンロードしてください。

ソース

(function($) {
    $(function() {
        $('[class*=w_], [class*=h_]').each(function() {
            var classes = $(this).attr('class').split(' ');

            for (var i in classes) {
                if (match = classes[i].match(/^([wh])_(\d+)(px|p)$/)) {
                    var key = '';
                    var value = '';

                    switch (match[1]) {
                        case 'w':
                            key = 'width';
                            break;
                        case 'h':
                            key = 'height';
                            break;
                    }

                    switch (match[3]) {
                        case 'p':
                            value = match[2] + '%';
                            break;
                        case 'px':
                            value = match[2] + 'px';
                            break;
                    }

                    $(this).removeClass(match[0]).css(key, value);
                }
            }
        })
    });
})(jQuery);

設置

jqueryを利用しますので、本ライブラリを読み込ませる前にjqueryの1.3.2以上を読み込ませてください。

利用方法

class指定に下記のような記述をしてください。

この場合、widthが100ピクセル、heightが200ピクセルの指定がされます。
また、パーセントでの記述も対応しています。

この場合、widthが100％、heightが33%の指定になります。
他のclassとの共存も問題ありませんので、比較的自由なデザインが可能になるかと思います。