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

執筆者:

関連記事

SASS/SCSS+COMPASS+zurui-sass-railsで角丸・グラデ・半透明・テキストシャドウ・ボックスシャドウ

By: Ole Houen – CC BY 2.0 sass-lang.com/ Sassの基礎 (全15回) ドットインストール ネストを覚えた人のためのSassの便利な使い方 comp …

backbone-relationalで関連するコレクションをRails3.2のAPIに投稿〜accepts_nested_attributes_for

By: Mike Baird – CC BY 2.0   backbonerelational.org/ Backbone-relationalを使って関連するコレクションをまと …

no image

Ubuntu ServerのGuardからネットワーク経由でWindowsのブラウザをリロードする~guard-livereload

Ubuntu12.04.1でCoffeeScriptの自動makeとブラウザの自動リロード~guard-coffeescript   Ubuntu ServerのGuardからGrowl f …

Rails3で帳票印刷を試す~thinreports

By: ZZ Bottom – CC BY 2.0 目次1 Thinreports2 とりあえずサンプルを試してみた3 ソースを見てみる1~詳細画面4 ソースを見てみる2~一覧表 Thin …

Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize

  d3.jsにはlayoutというおおまかに準備されたレイアウトがあって、その中にあるTreeレイアウトを試してみることにした d3.js自身のapiリファレンスが階層構造になっているので …