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

執筆者:

関連記事

no image

RubyでDocxを分解してみた~Nokogiri::XML::SAX

    参照 Rubyでdocxをいろいろ分析してみた 今度はsaxのアプローチでdocxのword/document.xmlを分解してみた 使い方は、Nokogiri::XML: …

Ubuntu ServerのGuardからGrowl for Windowsにネットワーク経由で通知する

github.com/guard/guard 普段はWindows7から仮想環境(VirtualBox)のUbuntu Server 12.04.1へputtyで接続して開発してます. Virtual …

no image

Rubyでローカルで使うgemをつくる~bundler

  目次1 bundlerのインストール2 bundle gem ファイル名3 gemspec4 lib5 パッケージ化6 インストール7 使い方 bundlerのインストール gemパッケ …

no image

CarrierWaveのファイルをpublic以外に移す

  参照 How To: Secure Upload 現状でCarrierWaveのファイルがpublicという公開フォルダに置かれるのが気になったので調べてみた 違ってるかもしれないので自 …

もしもRails3.2とBackbone.jsでリアルタイムな2ch風な掲示板をつくったら〜private_pub

By: Kevin Dooley – CC BY 2.0   まだ、Observerのことがよくわかってない ので、過去のやつをもとにやってみた dry-shore-2517.h …