JavaScript Railsで使えるGem

Rails3で動画配信を試用~flowplayer

投稿日:

 

最近はYoutubeなど動画配信サイトも充実してきていて知人向けのプライベートな配信も可能なようだ

しかし、やっぱりYoutubeにアップするのは抵抗があったり、LAN内だけで配信したい場合には、ウェブアプリなんかのほうがいいかもしれない

Flowplayerは基本的にはFlashを使ってJavascriptで簡単に動画再生を行えるライブラリである

オリジナルロゴなどを利用できる商用版とFlowplayerのロゴ入りのフリー版がある

普通はフリー版で十分

flowplayer.org/download/

 

Gemfile

bundle

 

モンキーパッチ

stackoverflow.com/questions/9125835/rails-3-1-flowplayer-gem-install

いきなりrails gをしようとするとエラーが出る

とりあえずstackoverflowを参考に上から下に書き換える

moduleの設定方法が変わったのかな?詳しくはわからない

 

*いま確認したらGithubのほうは修正済みでした

github.com/scottdavis/flowplayer-gem

genarate

これで必要なjavascriptとフラッシュファイルがpublic以下に配置される

 

View

application.html.erb

app/assets以下は先頭に/をつかない、public以下は先頭に/をつけるらしい

d.hatena.ne.jp/kobaken75/20120410/1334038386

 

使い方

これでview中で専用のflowplayer_forタグが使えるようになる

show.html.erb

とりあえずpublic/mediaフォルダを作成してビデオファイルとサムネイルファイルをおいてみる

 

とりあえずChromeとIE9では動いたけど、Firefox15.01では音が出ない上に、5秒過ぎると動画がとまってしまう。

ライブラリを最新の3.2.15に変えてみたけれどダメだった

うーん

追記 macのfirefoxではうまく動きました

初代ipadはフラッシュがないのでダメ 命令に.ipad()をつければ動くはずだけど・・・ プラグインが必要でした(詳細は↓)

Android携帯(Galaxy S)で動作確認 最大化もできるけど、コントロールが小さくて使いづらいかも

red5とかのストリーミングサーバーを使っていないのでシークはダウンロードした部分だけ

iPhone/iPadに対応させる

プラグインのダウンロード

flowplayer.org/plugins/javascript/ipad.html

プラグインが必要なので、上のページからダウンロード

public/javascriptsにいれる

application.html.erb

 モンキーパッチ

とりあえずライブラリ内のplayer.rbでjavascriptを実行しているところを探して、.iPad();をくっつける(1ヶ所)

初代iPadで動作確認した

ipad()メソッドをつけても普通のPCでも変わらず再生できる

 

*Chromeに動画プレイヤーがついているのに気づいた

Flowplayerもかなり高機能だが、こちらも軽くてキャッシュを賢く使うのでChromeを使う限りこちらのほうが使いやすい

-JavaScript, Railsで使えるGem
-, ,

執筆者:

関連記事

Rails4とD3.jsでローソク足グラフを描く〜Rails準備編

By: Manuel Calavera – CC BY 2.0 前回 Rails4で複雑な検索〜Ransack こちらのサンプルを使用させてもらいました。 datawarehouse.we …

Rubyでウェブサイトを操作してリストをつくる〜mechanize

    By: JoshSemans   以前からRailscastsというRuby on Railsの動画サイトが好きでよく見ているのだが、380近く動画があって気にな …

Rails3.2とBackbone.jsでサーバーサイドのソーティング

By: Haldane Martin – CC BY 2.0   Rails3.2とBackbone.jsでサーバーサイドのフィルタリング 次はソートを実装したい 目次1 サーバ …

no image

Carrierwaveでpdfのサムネイルを作成する

Rails4とD3.jsでローソク足グラフを描く〜d3.js編

前回 Rails4とD3.jsでローソク足グラフを描く〜Rails準備編 目次1 jsonデータ2 y_scaleを考える3 始値と終値から箱をつくる4 高値と安値でひげをつくる5 y_axisをつけ …