Home > HTML5

HTML5 Archive

第7回:ビデオコントロールパネルの作成 ~再生・音量ボタン・再生位置テキスト編~

  • Posted by: HKF管理人
  • 2012/02/17 20:02
  • HTML5
第7回サンプル画像

第7回サンプル画像

 

またまたタイトル改名

今回はビデオコントロールパネルの作成を行いました。上の画像の黒い帯の部分です。
画像を使用したところは、再生の三角マークや音量ボタンなどの各種アイコンのみ。
youtubeは音量スライダーも画像でしたが、こちらはスライダーもCSSのグラデーションで作ってみました。
あと黒い帯もCSSのグラデーションです。

flashを使わずにjavascriptだけで各機能が動いています。
ほんといろいろできるな~と感心。
作っている途中、重たくないかなーというのがずっと気になってた。
今のところは大丈夫だけど。というかこれぐらいで重たかったらあとが続かない・・・。
音量周りがもうちょっとスマートにできそうなきがする。

次回はソース選択画面の作成。画質を選択できるやつです。
ブラウザによって動画の対応コーデックが違うみたいなのでそこをうまく実装しないと。
あと他にはフルスクリーンモードのボタンも作らないといけないけど、そこもブラウザによって実装が違う?みたいなので次の次の機会にしよう。

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

【第6回】iframeをpostMessageで通信【javascriptだけで作るニコ風動画サイト】

iframeを1つにしてpostMessageでお互いに通信はできました。
postMessageはIE8でも使えるのでほっとしたものの、IE8はHTML5のvideoをサポートしていないんですね・・・。
となると動画の再生自体ができないので、IE8での実装は無理っぽいですね。
IE9ならvideoをサポートするそうですが、IE9はXPユーザーは使えないみたいですね。
ほんといっつも最後の砦でIEが待ち受けている感じw
さてさて、次回は動画プレーヤー機能の充実を実装予定。
ちょこっと調べたところvideo周りではHTML5の充実っぷりがすごいですね。
HTMLで文字を動かすにはマーキーを使ってたころに比べると驚き。

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

javascript:(function (){

var siteArr = [
'http://www.youtube.com/watch?'
];
var c=siteArr.length;
for(var i=0;i<c;i++){
if(location.href.indexOf(siteArr[i]) == 0 ){
var s=document.createElement("script");
s.charset="UTF-8";
s.src="http://hk-factory.sakura.ne.jp/testApi/minmiru/06/get_params.js?"+new Date().getTime();
document.body.appendChild(s);
console.log('document.body.appendChild '+s.src);
break;
}
}

})()

youtubeで動画を見ながら起動してください。FireFoxとChrome対応。

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

 

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

【第3回】youtubeのURLをブクマで取得→videoに設定【HTML5で作る動画コミュニティサイト】

前回のエントリーをあとで見直すと動画がみれない事に気がついた。

youtubeをみてソースを表示して動画URLを直張りしていたけど、一定時間が経つと見れなくなるらしい。
そこで次のように考えた。

  1. http://www.youtube.com/watch?v=00000のようなURLから動画URLを抜き出すPHP作る
  2. そのPHPと動画プレーヤーのHTMLをajaxを使って画面遷移なしにやりとり
  3. ヨカッタドウガミレタヨー

ローカルでやるとうまくいった。けどネットにあげるとできなかった。
なんかローカル環境で取得したyoutubeの動画URLと、ネット環境で取得したyoutubeの動画URLが違う。
youtubeのセキュリティだとは思うけど、ググっても具体的な仕組みが分からなかった。
サブアドレスにプロバイダーっぽい文字があったから、IPで動的にURLを生成しているのかな?(KDDIがあった)
リファラーやユーザーエージェントは偽装できるけど、IPアドレスは難しいとか聞いたことがあったようなないような・・・。

 

いろいろかんがえたけど、自分のサイトで不特定多数の人にyoutubeの動画を見れるようにするには、その人がyoutubeにアクセスするしか方法がないと結論。
外部プレーヤーやapiを使うのはなしの話で。
そういや動画寄生サイトもyoutubeは外部プレーヤーを使っていたな~とここでふと思い出す。

 

んでもって、調べているうちにブックマークレットで見ているyoutubeの動画URLを抜き出す、というのを発見したのを思い出す。

  1. youtubeを見る
  2. ブクマでURLを取得して自分のサイトに移動する
  3. getクエリの文字列から動画URLを取得してvideoタグに設定

これなら大丈夫そう。ちょっとめんどいけど。

できたのが次のjavascript

javascript:(
function(){
var ids=[
'watch-headline',
'playnav-panel-info',
'ud',
'vt',
'watch-actions',
'watch-info',
'watch-panel',
'masthead'
],
no_flv=true,
f={},
e,f,g,i,j,s,t,
ti='video',
x,map,
r='';
for(i in ids)
if(e=document.getElementById(ids[i]) )
break;
if(!e)
return;
try{
if(yt&&yt.getConfig)
map=yt.getConfig('PLAYER_CONFIG').args.url_encoded_fmt_stream_map;
}
catch(t){}
if(!map){
x=document.getElementsByTagName('body')[0].innerHTML;
if(x.match(/&(amp;|)url_encoded_fmt_stream_map=([^&">]+)/)){
map=decodeURIComponent(RegExp.$2);
}
else if(x.match(/[\'\"]PLAYER_CONFIG[\'\"]\s*:\s*({.*})/)){
map=eval('('+RegExp.$1+')').args.url_encoded_fmt_stream_map;
}
}
if(!map)
return;
map=map.split(',');

for(i in map){
x=map[i].split('&');
f={};
for(j in x){
g=x[j].split('=');
f[g[0]]=g[1];
}
if(f['type']&&f['type'].match(/video\/([a-zA-Z0-9_\-]+)/))
t=RegExp.$1;
if(no_flv&&t=='x-flv')
continue;
r += '&u=' + f['url'];
}
r = 'http://www.hk-factory.net/wp-content/uploads/2012/01/sample_03_018.html?' + r.substr(1);
window.open(r, null);
})()

この手間をメリットに変えれればいいけどな~と
まだぼや~っとしたものしか見えないけど。

先は長いな~

 

上のブックマークレットは次のURLを参考にしました
うえぽんSW局

【第2回】動画プレーヤーの貼り付け【HTML5で作る動画コミュニティサイト】

前回のHTMLの基礎に、HTML5で追加された<vide>タグを使って、動画プレーヤーを貼り付けてみました。

HTML5で作る動画コミュニティサイト
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<div id="allArea"><header id="header"><hgroup>
<h1>HTML5で作る動画コミュニティサイト</h1>
<h2>サイト見出し2個目。</h2>
</hgroup></header><nav id="nav">
<ul id="mainMenu" class="clearfix">
    <li><a>Home</a></li>
    <li><a>about</a></li>
    <li><a>sitemap</a></li>
    <li><a>contact</a></li>
</ul>
</nav>
<div id="mainContents"><section id="movieContent">
<h1>動画タイトル</h1>
動画の説明
<div>動画プレーヤー
<video width="320" height="240" src="http://o-o.preferred.kddi-hnd1.v11.lscache1.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Csource%2Cratebypass%2Ccp&amp;fexp=903103%2C907201%2C910101%2C914102%2C913406&amp;itag=43&amp;ip=222.0.0.0&amp;signature=0A582FC4DC8F19A18AF155D4AAA26D87B479B1D0.679B84EA90346D9D75386E041954DBF7A672A2CE&amp;sver=3&amp;ratebypass=yes&amp;source=youtube&amp;expire=1324653776&amp;key=yt1&amp;ipbits=8&amp;cp=U0hRSVZQUV9MUENOMV9OSlVIOnRxaDFKVTdHVFZx&amp;id=0933c8a3d3f44959" controls="controls">動画を再生するにはHTML5に対応したブラウザが必要です。</video></div>
</section></div>
<footer id="footer">Copyright © hk_factory All Rights Reserved.</footer></div>

sanmple_html5_02_01

<video>タグの中にテキストを入れておくことで、HTML5に対応していないブラウザでは中のテキストを出力してユーザビリティを配慮。

<video>タグで使っている属性について。
src・・・動画ファイルのURL。上のサンプルは無駄に長いけど、youtubeから直に取ってるので気にしない
controls・・・再生ボタンや音量ボタンを表示

属性は他にも色々ありますが、あとで仕様変更の可能性もあるので割合。
再生ボタンなどのインターフェイスの見た目は、ブラウザが用意してくれるのでブラウザによって見た目は変わってくるみたいですね。flashだと自分でボタンを作ってイベントを作って・・・と面倒だったのでこれはすごいらくちん。
少し調べたところ、javascriptでいろいろイベントを設定できるみたい。再生時間によってテキストで字幕表示とか。

ブラウザからflashファイルを介さずに直で動画を再生できる・・・っていうのが個人的にすごくイイ。
上のサンプル動画はWebM形式。HTML5の動画フォーマットに関してはいろいろ言われていますが、youtubeがWebMに大きく動き出しているので、WebMが勢力を伸ばしそうな気がします。

ホーム > HTML5

twitter
リンク

Return to page top