CM動画に、CMの連続再生,CM画像スライド表示などの機能を追加

　CM動画のページですが、 先月6月下旬頃からボチボチ新機能を追加し、今月7月1日に連続再生やCM画像のスライド表示などの楽しみながらCMが見れる機能を、各ページに追加しましたので、このページでは使い方などを中心に概要をざっと簡単に紹介します。

尚、主要なコードはJSで記述しており、いずれも、Androidモバイル(Nexus7)での対応も確認しています。

また、連続再生,スライド画像表示など、いずれでのCM再生も人気CMランキングに対応し、適正な再生回数がCMへの投票数としてランキングに反映されます。

CM画像全表示/非表示

ページ内の各CM紹介記事の下にYoutubeのサムネイル画像(hqdefault)が表示されます。
サイズが480x360なので、10年以上前ならば、壁紙として使う人もいたほどのサイズでしょうか。
ブログ記事の閲覧に慣れた人などが、 記事と大き目のサムネイル画像でCMの内容を見たい場合や確認したい場合などの利用に適しています。尚、遅いPCや重いネット環境では負荷がかかる場合があります。

CM画像スライド表示

ページ内の各CMのYoutubeのサムネイル画像(hqdefault)が、メニュー上に表示されます。
[戻る][進む]で操作できます。前の●をクリックすれば、マーク(MK)をON/OFFできます。
サムネイル画像をクリックすれば、CM動画が再生されます。再びCM画像スライド表示をクリックすれば戻ります。
右端の”非表示”で終了します。
画像だけでページ内のCM内容を判断したい、CMを探したい場合にお勧めです。

MK画像スライド表示

(●をクリックして)マーク(MK)してあるCMのYoutubeのサムネイル画像(hqdefault)がメニュー上部に表示され、一番小さなサムネイル画像が右下墨にオーバーレイで自動で切り替って表示されます。
[戻る][進む]で操作できます。前の●をクリックすれば、マーク(MK)をON/OFFできます。
サムネイル画像をクリックすれば、CM動画が再生されます。再びMKM画像スライド表示をクリックすれば戻ります。
Youtubeの戻る,進む,再生リスト一覧からの再生に対応しています。
右端の”非表示”で終了します。
マーク済みのお気に入りのCMをサムネイル画像で表示して選ぶ場合などにお勧めです。

CM連続再生

ページ内のYoutubeのCM動画を、連続して再生します。
最初だけ中央の再生ボタンを押せば、あとはループ再生を続け、最後まで行けば最初のCMから再び再生されます。
Youtubeの戻る,進む,再生リスト一覧からの再生に対応しています。
右端の”非表示”で終了します。
CM出演者のファンでページ内のCMを全部見たいと言う場合や、ページ内のCMを全部何度も繰り消してみたい場合などにお勧めです。

MK連続再生

(●をクリックして)マーク(MK)してあるYoutubeのCM動画を、連続して再生します。
最初だけ中央の再生ボタンを押せば、あとはループ再生を続けます。
Youtubeの戻る,進む,再生リスト一覧からの再生に対応しています。
右端の”非表示”で終了します。
マーク済みのお気に入りのCMだけを繰り返してずっと見ていたい場合などにお勧めです。

最少サムネイル画像の自動切り替え

YoutubeのCMの場合は、記事毎に最少サイズのサムネイル画像が付属しますが、マウスオーバーで3種類のサムネイル画像が自動で切り替ります。
大雑把ではありますが、パラパラアニメ風に、動画のイメージをさっと掴む事ができます。

MK(マーク)

CMのタイトル名の前にある●をクリックする事で動画をマーク(MK)できます。白抜きの○がONで、通常の●がOFFです。(Koossのマーク機能と同じと考えて差し支えありません）
マークしたCM動画は、上の連続再生やスライド表示で見る事ができ、好きなCMだけまとめて、スライド表示,連続再生のメニューのあるどのページでも見る事ができます。
因みに、このMK(マーク)機能はHTML5のストレージ機能を利用しており、ブラウザのクッキーは利用していません。あなたの(どんなCMが好きかなど)個人情報は一切漏れる事は無いので、思う存分好きなCMをマーク(MK)してご利用下さい。尚、ページを推薦してCM出演者を応援したい場合は、各ページのTwitterやG+のSNSボタンをご利用下さい。あなたやあなたの紹介で閲覧した人のページ内のCM動画の閲覧数が増えれば人気CMランキングにも反映され、CM出演者の応援にも繋がります。
この機能は、ブラウザがシークレットモードの時は使えません。
マークは同じブラウザでのみ有効です。別のブラウザには同じ内容が反映されませんが、ブラウザ毎に違うタイプのCMをマークをするなどで生かせます。

最後に

CM動画の連続再生は、４〜５年前に作っていて(実は連続再生だけならば、phpやhtmlのみでも簡単に組めます。)、CM動画はテレビと同じようにまとめて一気に見ると、また違った楽しみ方があると感じ、これは面白いと思ってたんですが、CMランキングやデータ構造などとのシステム的な整合性も有り、組み入れるのは案外手間で、その時はYoutubeの公式チャンネルの著作権侵害では無いCM動画も少なく、割にあわないと言う事と、何かと忙しく随分長い事放置していました。

今回Youtubeに特化したCM動画の連続再生の機能などを追加したのは、ここ１〜２年でYoutubeの公式チャンネルのCM動画がかなり増えたのと、動画共有サイトでの著作権ルールもしっかりしてきてる事や、CM動画の連続再生の面白さに気付いた人へのニーズが高くなってきてるようなのと、Google DevelopersのYouTube Player APIがとても参考になったので、今度は組み込む事を前提として、最初から組み直して公開した次第です。
HTML5のストレージ機能(WebStrage)は今回初めて使ったんですが、これは楽で便利でいいですね。
動画再生関連では、もしまた時間などの余裕があれば、もう少し機能を追加する予定です。

CM動画のページは、 情報を通知,拡散するだけのブログとは異なり、仕様的な制約の無いウェブサイトなので、より、見やすく、わかり易く、探しやすく、面白く楽しく、CMが見れると言う点に軸足を置いて、多くの紹介動画コンテンツが生きるように改善していこうと思います。

追記：2015/12/11
・マーク(MK)の連続再生時に連続再生が機能しない場合がある不具合を修正した。
・マーク(MK)の連続再生時に動画アノテーションを非表示にした。

追記：2015/01/20
・IE(ブラウザ)でのYouTube(api含む)再生時のレイヤー表示対策で womodeを指定し、前面にかぶって出ないようにした。

追記：2014/07/11
その後、以下の不具合やバグの類を修正しています。
・連続再生で同一IDのYouTube動画がある場合、進まなくなる場合がある点を修正。
・連続再生で、同一動画はスキップさせるようにした。
・連続再生で、Android端末(Nexsus7)では順番に再生されない場合があるのを修正。
・連続再生で、ブラウザがChromeの場合、全画面表示されない不具合を修正。
新たに以下の機能を追加しています。
・Youtubeのコメントを閲覧できるようにした。但し公式物は殆どがコメント無効なので、コメントの無い動画が大半。
以下の不具合を確認しています。
・連続再生で、Android端末(Nexsus7)では、スライドバーで再生位置を終わり付近まで移動させた場合、次の動画がスキップする場合がある。発生条件等は不明だが、原因はプレーヤーの状態を示すgetPlayerStateが終了を返さないので、自動的に再生リストの次の次の動画へと進んでしまう。
以下の不具合は対応検討中です。
・Android端末(Nexsus7)でのページ画面の拡大/縮小時の乱れなど。

無料サイト集 Kooss (run)記