Home > Archives > 2012-02 Archive

2012-02 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対応。

第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回のブックマークレット

Home > Archives > 2012-02 Archive

twitter
リンク

Return to page top