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

執筆者:

関連記事

Rails4でのJSONテンプレート~jbuilder+rabl+ruby

By: Wonderlane – CC BY 2.0[/caption] Rails4からJSONも標準でjbuilderを使ってテンプレートから出力できるようになった けど、しっくり来な …

no image

Ubuntu server12.04でRails4とPostgreSQL9.3をつかう〜hstoreとか

目次1 準備2 rails new3 config/database.yml4 hstoreとarrayを試してみる 準備 Ubuntu server12.04にPostgreSQL9.3をインストー …

no image

Rails3.2からBackbone.jsとD3.jsを使う一例

目次1 Backbone.jsからD3.jsを使う2 RailsのネストしたURLでBackboneを使う Backbone.jsからD3.jsを使う d3.jsで力指向グラフを使って遊ぶ2のクラス構 …

Rails5でマテリアルデザイン~material_design_lite-sass

By: AnnaKika – CC BY 2.0 目次1 マテリアルデザイン2 gem3 scss & javascript4 Turbolinksに対応5 simple_form …

no image

Rubyでエクセル帳票印刷(.xls)~spreadsheet

  pdfとdocxとxlsが作成できれば帳票印刷で困ることはなさそう spreadsheetというgemを使ってみた 参考 dragonstar.asablo.jp/blog/2009/0 …