Home > サイト運営ネタ

サイト運営ネタ Archive

第8回:ビデオコントロールパネルの作成 ~ソース選択画面編~

できるうちにやっておこう・・・というのは、またちがうおはなし・・・

さて、今回はソース選択画面を作りました。
技術的に特に難しいところはなく、画像や角丸の部分はCSS3です。
とりあえずyoutubeにアップされている全部のソースを表示しています。html5videoはブラウザによって再生できるフォーマットがちがうので、対応していないのは打ち消し線を施しています。上の画像はFireFoxの場合。
ちょっとつまずいたところは、1:ブラウザの対応フォーマットを調べる

canPlayType

メソッドの戻り値がFireFoxとChromeでちがった事と、2:ソース切替後、途中から再生させようとしたときの2点。

1番目は、次のソースをFireFoxのfirebugとChromeのデベロッパーツールで試した場合、FireFoxは”probably”、Chromeは”"になった。(ちゃんとvideo要素作ってから試してね)

var video = document.getElementById("video");
video.canPlayType('video/webm;+codecs="vp8.0,+vorbis"')

どちらもWebMに対応しているはずだけど、;のコロン以降の邪魔な文字のあるなしで変わっているみたい。
‘video/webm’にするとChromeでも動く。FireFoxがおおちゃくしているのだろうか。

2番目は、video.srcでソースを設定して、video.load()して、video.play()と立て続けにするとエラーが出た。
loadした後に’loadedmetadata’というイベントを取得してからplayで解決した。
このvideo周りの仕様は、AS3と似ていて雰囲気がつかみやすい。
細かい見た目の部分はまたあとで修正予定。
次回はフルスクリーンモードの切替ボタンの実装。

 

第8回のブックマークレット
ブックマークに登録してyoutubeで動画を見ながらブックマーク起動。FireFoxとChrome対応。

【第5回】iframe同士の連携と新たな問題点、あとタイトル改名【javascriptだけで作るニコ風動画サイト】

前回はiframeを2つ用意してました。動画プレーヤー用と@anywhere用。
@anywhere用のiframeをjQuery UIで自由にドラッグできたらいいなーと思っていたんですが、iframe上だとイベントがうまくいかないようだったので?諦めました。

そして今回は動画プレーヤーifrmaeの中に@anywhereのiframeを入れています。
そして@anywhere用の中に動画プレーヤーの再生・停止ボタンなどのコントロールパネルを設置しました。
この二つのiframeは別ページなのですが、同一ドメインなのでiframe越しでもjavascriptでアクセスできるというわけです。

新たな問題点とは、youtubeのサイトから動画プレーヤーiframeに値(動画URL)を渡す時に、ハッシュクエリー(location.hash)を使っているんですが、これをするとURLが長すぎてうまく動作しないような気がします。現状IEで作動しないのはこれのせいだと思います。
あとhashの値がブラウザによって変わるみたいですね。URIencode関係で。
次回はこのあたりをちょっと変えようと思います。

で、どう変えるかと言うとwindow.postMessageを試してみようと思います。
postMessageは新しい仕様なので躊躇していたんですが、IE8からいけるみたいですね。ならなんとかいけそう。
次回の課題はpostMessageを使って、IE・FireFox・Chromeで動作確認する事です。

ブックマークレットのソース

javascript:(function (){

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

})()

youtubeで動画を見ながら起動してください。FireFoxのみ。

第5回のブックマークレット

【第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を貼り付け

 

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

製作のモチベーションを保つコツ

いやもうやりたい時にガーッっとやる!

これしかない。

多少眠くても他に(リアルに)することがあっても思い立ったらすぐにやる!

飽き性の自分には、今やってることもすぐに飽きるだろう。

そしたらまた違う事をしよう。

飽きても仕事みたくダラダラ続けると

ミスも多いしいいものも作れない。

ホーム > サイト運営ネタ

twitter
リンク

Return to page top