[pukiwiki]
** videojsプラグイン for pukiwiki [#l7770009]
Apple StoreでノートPCの修理受付待ちをしている間にiPadを触っていたんだけど、
iPadのブラウザで自鯖の動画は見れなかったので見えるようにしてやろうと、HTML5に対応してみた。
Pukiwiki上でストリーミング的に動画配信っぽい画面をHTML5対応ブラウザでも表示できるように作ってみたプラグイン。
video-js 提供のスクリプト http://videojs.com/ ~
flowplayer のプレイヤー http://flowplayer.org/ ~
を呼び出します。
ブラウザが再生しようとする動画をHTML5で再生できる場合、ブラウザ内蔵のplayerで、
できない場合はFlashPlayerで再生しようとします。
使いたい人がいるか分かりませんが、下のほうの添付ファイルに置いているのでご自由に使ってください。
何か問題があったら適当に直して使ってください。
-初期設定~
・JavaScriptを使用するのでpukiwiki.inc.phpに以下の設定を行う。~
define(‘PKWK_ALLOW_JAVASCRIPT’, 1)
・最初のswfpathとvideojspassとvideojscsspassは配布元を参照しているので編集しなくても動作しますが、消されたりしたときのためにローカルに置いてそちらを参照するのをお勧め。~
例）
$messages = array(
‘jspass’ => ‘/flowplayer/flowplayer-3.2.3.min.js’,
‘swfpath’ => ‘/flowplayer/flowplayer-3.2.7.swf’,
‘videojspass’ => ‘/video-js/video.js’,
‘videojscsspass’ => ‘/video-js/video-js.css’,
);
-書式
＃videojs(path[,width][,height][,id][,autoplay][,autobuffer][,movietype][,bgimage][,subtitleurl])~
path : 動画ファイルのURL~
width : 再生画面の横幅(省略時512pixel)~
height : 再生画面の縦幅(省略時384pixel)~
id: 動画につけるID名(省略時”id_”+pathのmd5sum値)~
autoplay: 画面表示時に自動で再生開始するかどうか(true指定で自動再生)~
autobuffer: 画面表示時に自動でダウンロードを開始するかどうか(true指定で自動ダウンロード)~
movietype: 動画形式を指定。mp4の場合 video/mp4; codecs=”avc1.42E01E, mp4a.40.2″ とか (省略時 video/mp4) 参照 : http://www.html5.jp/tag/elements/source.html~
bgimage: 再生開始前に表示する画像ファイル (省略時画像なし)~
subtitleurl: SRT形式の字幕ファイルのURL。(省略時字幕なし)ブラウザが対応していたらもしかしたら字幕が出るかも。SRT形式字幕はカラオケ動画には使えないので動作未確認
何か追加オプションとかつけたかったら適当にソースを修正してください。
-サンプル
#videojs(http://misakichi.dnsalias.com/assuploader/download/1305817789.mp4,640,480,,false,false)
#videojs(http://misakichi.dnsalias.com/assuploader/download/1305817789.mp4,640,480,,false,false)
今日現在だと、mp4形式はFireFox3.6ではFlashPlayerで、ChromeだとHTML5で再生するはず。iPhone,iPadはどうなるかは持っていないからわかりません。
とりあえず、いままで使用していたflowplayerプラグインもこの鯖内では、このプラグインに動作を差し替えたのでこの鯖上の再生プラグインの動作は全部変わっているはず。
Chomeブラウザ、AutoPlayをfalseに設定しても自動再生する;;オプションが効くかどうかはブラウザしだい！
(9-June 追記)~
AutoPlayが利かなかったのはオプション指定の仕方が悪かったからみたい。てかHTMLのboolean型ってtrue/falseで指定できなかったとは・・・。(Web畑じゃないもので)~
というわけでその辺を修正したものに差し替えました。
#comment
[/pukiwiki]