Home > HTML5 | サイト運営ネタ > 【第4回】youtubeプレーヤーをhtml5用に変えてtwitter表示【HTML5で作る動画コミュニティサイト】

【第4回】youtubeプレーヤーをhtml5用に変えてtwitter表示【HTML5で作る動画コミュニティサイト】

前回は

youtubeを見る

ブックマークレット押す

動画URLを保持して動画コミュニティサイトに移動

だと、すごい面倒というのが課題だった。

そこで以前から考えていたflashプレーヤー上でコメントを流せないかな~をもう一度考え直してみた。
これができれば次のメリットがある

  1. youtubeやその他動画サイト上がすぐにコミュニティサイトになる
  2. 1の理由から自分のサイトを持つ必要がなくなるので、管理その他もろもろが楽。
  3. ブクマで動画URLを抽出すれば、有効期限(トークン)有の生動画URLが取得できる。サーバーサイドスクリプティングでスクレイピング&ログイン処理とかいらない。
  4. ブクマを利用するのでユーザーが普段から使い慣れている動画サイト上でコミュニティが取れるようになる。すぐにコミュニティが取れる。

とりあえず思いついたのでこの四つ。
1,2,3は製作者(私)にとってのメリット。ブクマを置いたり使い方とかでレンタルサーバーと独自ドメインをとるつもりだけど、サーバー側をそんなに気にしなくて済む。
あと金銭的に。
規模が大きくなるとサイト内でアクセスを分散させたり、SQLチューニングとかキャッシュ使えるところは使ったりとか面倒。
あと金銭的に。
クライアント側だけの処理に専念できるっていいね。
あと金銭的に。

4はやっぱ使い慣れた動画サイトっていうのがいいね。youtubeやニコニコのほかにひまわりとかの動画寄生サイトとかいろいろあるけど、公開されている動画の内容にもよるけど使い慣れたところってやっぱいいよね。それだけで再アクセスしちゃう。

 

じゃ次はデメリットとか問題点。

  1. そもそもflashプレーヤー上にコメント流せる?コメント再生位置と動画再生位置の同期が取れる?
  2. youtubeもニコニコもそれ自体がコミュニティサイトなのに、さらにコメントできるようにするの?

ずっと考えていて答えが出なかったのが1の問題。
flashの上にdivを重ねてwmodeとかcssのpositionとか駆使して考えてみたけど、それをするとflashのパフォーマンスが落ちるみたい。
最近調べなおしたらflashのバージョンがあがって改善されたとかどうとか。
同期の問題もどうするかなーと唸ってた。
ただ、1の問題はHTML5に触れて光が見えてきた。
そして2の問題は、コメントにtwitterを利用する事で逆によい方向への広がりを見せそうな気がする。

 

と、ここ数日あーでもないこーでもないとうんうん唸って、次のようなものができた。

youtubeを見る

ブックマークレットを押す

flashプレーヤーがhtml5のvideoに書き換わる

twitterでコメントを入力できる

javascript:(function (){

var s=document.createElement("script");
s.charset="UTF-8";
s.src="http://hk-factory.sakura.ne.jp/testApi/minmiru/04/set_youtube.js";
document.body.appendChild(s);

})()

上のjavascriptをブックマークに登録して、youtubeで動画を見ながらクリックで切り替わります。
ページ一番下あたりにtwitterの投稿フォームがあると思います。
とりあえずこんな感じ。ここまでサーバーサイドスクリプティングはなし。
スクリプトの内容としては・・・
ブクマでjsを読み込み

jqueryでflashプレーヤーをhtml5のiframeに書き換え

@anywhereを搭載したiframeを貼り付け

 

なんだこの長ったらしいタイトルは・・・タイトルは空白でここまで文章書いてから考えました。

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.hk-factory.net/site-neta/138/trackback/
Listed below are links to weblogs that reference
【第4回】youtubeプレーヤーをhtml5用に変えてtwitter表示【HTML5で作る動画コミュニティサイト】 from hk_factory

Home > HTML5 | サイト運営ネタ > 【第4回】youtubeプレーヤーをhtml5用に変えてtwitter表示【HTML5で作る動画コミュニティサイト】

twitter
リンク

Return to page top