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

Rails3.2+MongoDBでつくったアプリをheroku+mongoHQにアップしたよ

Stack Overflowはなんでも答えてくれる エラーメッセージをコピーしてググればたいていの答えはStack Overflowで出尽くしている 目次1 Gemfile2 herokuにアプリ作成 …

Rails4で複雑な検索〜Ransack

By: eric molina – CC BY 2.0 株価データをつかって複雑な絞り込み検索ができるようにしてみた データは、こちらのサンプルを使わせていただいた datawarehou …

TwitterBootstrapでアイコンが微妙な感じだったらFontAwesomeを試してみるといい

かもしれない fortawesome.github.com/Font-Awesome/ hallojsで使ってるのは上 github.com/bokmann/font-awesome-rails gi …

Rails3.2のアプリにユーザー機能を追加する~Devise

By: Ethan Lofton – CC BY 2.0 目次1 はじめに2 インストール3 次にやること4 メッセージを日本語化する5 デバイスモデルにカラムを追加6 サインアップできな …

Rails4でMarkdownをリアルタイムプレビュー〜backbone-on-rails&marked.js

By: Kool Cats Photography over 2 Million Views – CC BY 2.0 目次1 前回2 サンプルアプリ3 Gemfile4 generate5 …