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
-, ,

執筆者:

関連記事

Rubyでデータクリーニング~mechanize & active_support

  オライリー・ジャパンから「d3をはじめよう」という本が発売されたので読んだ 棒グラフ、折れ線グラフ、インタラクション(マウスオーバーで丸が大きくなるとかラベル表示とか、横のリストからグラ …

ActionCableのサンプルをみてみた

By: Samantha Brough – CC BY 2.0 目次1 ActionCableとは2 rails4での利用3 redisサーバーの準備4 cableサーバーの準備5 チャッ …

RailsでECサイト構築5 プロモーションを試す~spree

  spreeをインストールするとspree-promoというエクステンションが含まれている これを使うといろいろな販売企画をすることができる 管理画面から適当に作成してみる 今回は特定の商 …

Rails4でつかえるインラインエディタを試してみた〜X-editable-rails

目次1 x-editable2 bootstrapを導入3 x-editable-rails4 サンプルアプリ x-editable 文字をダブルクリックして編集できるやつ x-editable vi …

no image

Rails3.2でユーザー権限を細かく設定~Devise + cancan

      参考 cancan でモテカワ♥愛され権限管理 How To: Integrate with CanCan for roles management &nbs …