JavaScript Railsで使えるGem

RailsでHTML5対応のvideoプレイヤーを利用してみる~flowplayer5.0.0

投稿日:

 

参考

flowplayer.org/

Flowplayerのサイトからバージョン5.0.0がダウンロードできる

flowplayer-gemのバージョンは3.2.4

バージョン5では基本的にvideoタグを使ってhtml5での再生を試みて無理な場合はflashでの再生をする

つまりプラグインなど無しにiPadなどでの再生ができる(*ipad、androidともなぜか再生できませんでした;;)

また使ってみた感想として、Chromeに付属のプレイヤーと同じく何度もダウンロードせずにキャッシュをうまく使ってスムーズにシークができる

以下は簡単に試す方法を書く

配置

vendor/assets以下にダウンロードしたファイルを配置する

これでベストかどうかわからないが(imgの配置場所がわからない…でもcssを開いてみたらパスを書きなおすのが面倒くさいので諦めた)、動いた例は次の通り

また、flowplayer.swfはpublic/に置いた

 

設定

app/assets/javascripts/application.js

app/assets/stylesheets/application.css

helper

超手抜きで(*訂正しました)

  •  Flowplayerの使い方としては、div.flowplayer>video>sourceの順に指定すればOK <script>はなくても動く
  • 初期画面のスクリーンショットにはvideoタグのposterを使う
  • source typeは指定しなくても動くが遅いので、指定したほうがいい.やり方はPathnameクラスのextnameメソッドで拡張子を取得できる.「.mp4」のように.がついてしまうが、動作に支障はないようだ.
  • flowplayer.swfは指定しなければCDNからダウンロードしてくれるみたい

view

あとはhelperメソッドをviewのなかで使えばOK

 

かなり軽くて便利な感じだ

*追記

assets:precompileに失敗した

minimalist.cssの下でleftの指定がないから、適当に指定したらprecompile通った!

 

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

執筆者:

関連記事

Rails3.2でdocxを作成

  途中経過 github.com/jawspeak/ruby-docx-templater これを試してみた まずローカル環境にgemをダウンロード [crayon-58b430233cc …

no image

Google SpreadsheetにGoogleカレンダーからイベントの一覧を読み込む〜Google Apps Script

リファレンス developers.google.com/apps-script/ カレンダーのリファレンス developers.google.com/apps-script/reference/c

no image

Rails3.2でユーザー管理機能を追加2~Devise+AjaxDataTables

  前回 Rails3.2でユーザー管理機能を追加~Devise 参照 Railsでajaxなテーブルを使う~datatables   いままでAjaxでのデータ更新ができなかった …

Rails3.2でGoogle Calendarライクなカレンダーを使う〜fullcalendar-rails

目次1  fullcalendar-rails2 Hello fullcalendar3 オプション  fullcalendar-rails 2種類あるけど上の方を使った github.com/bok

no image

MongoidでMapReduceに挑戦中

MongoDBの薄い本の素材をMongoidでやろうとしたけど途中経過 MapReduceをやることの利点は、並列処理ができるということとSQLより柔軟な処理なできるということらしい(MongoDBに …