Nucleus に flvの動画を埋め込むプラグイン NP_Fmovie

2006/8/24 mov.js を微調整
2006/8/19 0.2にバージョンアップ。詳細はこちら

動画を自動埋め込み NP_Douga – xx.nakahara21.netを利用させてもらい,flvファイルを公開するためのプラグインをでっち上げました

こういう感じです。Youtubeみたいなのを自前で運用する感じです。

ダウンロード: 20060910-Fmovie0.2.lzh

このプラグイン以外に必要なもの

  • FlowPlayer1.4 flvプレイヤー(1.4以外では動作しないかもしれません)
  • flv作成ツール いろいろあります。Riva FLV Encoderが簡単でした

Fmovie.lzh を展開すると

click.jpg
NP_Fmovie.php
fmovie/mov.js

ができます。click.jpgはflvをアップロードするアカウントのmediaフォルダにアップしてください。/media/1/ などです。あとの2つはそのままプラグインフォルダにアップロードしNP_FmovieをNucleusの管理画面からインストールします。バージョンアップの場合はいったん削除して、インストールし直してください。

FlowPlayerをダウンロード(1.4を推奨)してきてFlowPlayer.swfのみをmov.jsと同じフォルダにアップロードしてください/nucleus/plugins/fmovie/ です。

次に、動画を表示するスキンのヘッダに

<%Fmovie%>

を追加しJavaScriptを読み込むようにします。さらにNucleusの管理画面、グローバル設定でflvをアップロード可能にし、動画ファイルの大きさに合わせてアップロード可能サイズを調整してください。

これで準備完了です。

作ったflvを画像ファイルと同じようにアップし、埋め込むと

<%media(filename.flv|hogehoge)%>

というタグが埋め込まれ、動画が表示されるはずです。動画の大きさを指定したい場合、

<%media(filename.flv|hogehoge|width|height)%>

としてください。小さく表示するサンプルです。(hogehogeの部分は無視されます)

  • FlowPlayerのバージョンアップに対応
  • 外部JSファイルもプラグインから吐き出せ無いか?
  • インストールをもう少し簡単にしたい
  • FlowPlayer各種オプションに対応?
  • いっそPlayerを自前で開発?(だいぶインストールが楽になりそう)
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする


コメント

  1. 長崎太郎 より:

    これはすごい。ぜひつかってみたいのですが、Fmovie.lzh はどこでダウンロードできますか?

  2. 時武 より:

    すいませ~ん、リンクし忘れてました。
    これでダウンロードできると思います。

  3. 長崎太郎 より:

    管理人様、さっそくありがとうございます!!
    近日中に試そうとおもいます。
    もうひとつ質問ですが、FlowPlayerのバージョンは、最新のものでよいですか?

  4. 時武 より:

    1.5が出ていますね。とりあえず、1.4を想定してコーディングしています。
    1.5に対応させたものも準備しようと思いますが、お盆あたりかな~といった感じです。

  5. 長崎太郎 より:

    時武さま、お世話になっております。
    早速試してみて、あとちょっとで動きそうなところまできました・・・
    writeFlash(‘$blog’,’$media’,’$filename’)

    $blog
    のところが、私の環境では
    index.php
    となってしまいます・・・。
    この$blogが「福ろぐ」さんと同じように
    http://~ブログのアドレス~
    となってくれれば動く・・・というところは、別途htmlのページをつくり確認できました。
    $blogのところを変えるには、どうすればよいでしょうか?
    あと、htmlのほうで確認した限りではFlowPlayerは1.5でも大丈夫でした。

  6. 長崎太郎 より:

    自己レスですいません。
    わたしの環境では
    NP_Fmovie 43行目の
    「BlogURL」を「IndexURL」に替えたら
    動きました
    (この判断が正しいかはわかりませんが…)

  7. yama より:

    試してみましたが、うまく動きません。
    Flashプレイヤーのサイズぶんだけスペースが
    空くのは確認できましたが(320×240)、
    そこから先に進まないという状況です。
    .jsファイルの中身をよく見ると、
    「nucleus/plugin/fmovie/」と書いてありますが
    正しくは「nucleus/plugins/fmovie/」のように思います。
    あと、click.jpgのロケーション指定も違うような…
    np_dewplayerみたいな実装だと分かりやすいように思いますが、
    あえてJavaScript書き出しにしてあるのでしょうか。
    FlowPlayer自体もそういう使い方のようですし。

  8. 時武 より:

    >yamaさん
    ご指摘ありがとうございます。jsファイルを差し替えました。
    IEの仕様変更で直接フラッシュを表示させると一度クリックしないとフラッシュが有効にならなくなっています。それを回避するためにJavaScriptで表示するようにしています。
    スペースが空くのみで動作しないという状況にはいくつかパターンがあるようです。私も試行錯誤して動作するようになりました。OBJECTタグの吐き出し方で変わるようです。mov.jsを変更、すると動くかもしれません。あとは長崎太郎さんのようにNP_Fmovieが吐き出している変数が私が想定しているものと違うのかもしれません。
    もう少し汎用的に利用できるようにしたいと思っているので、情報があれば教えてください~。

  9. 長崎太郎 より:

    時武さま、おつかれさまです。
    わたしのところは
    http://(ドメイン)/a/index.php
    http://(ドメイン)/a/diary.php
    http://(ドメイン)/a/blog.php
    みたいなかんじでいくつブログがうごいている関係もあり、mov.jsの指定がうまくいきませんでした。結局、mov.jsのアドレスを直書きしました。。
    (ヘッダ部分はheader.incを読み込むタイプのスキンをつかっていたこともありまして・・・)

  10. shizuki より:

    はじめまして
    たまたま見かけて面白そうだったんでちょっと触ってみました
    43行目の「$CONF[‘BlogURL’]」ですが、これは複数ブログにしている場合だと、ブログ毎に変わってきてしまいますので、長崎太郎さんのようなケースは結構多いのではないかと思います。
    で、ですね43行目の「$CONF[‘BlogURL’]」を「getAdminURL()」にして、「mov.js」の
    htm+="/nucleus/plugins/fmovie/FlowPlayer.swf’ width=’320′ height=’263′ id=’FlowPlayer’>"

    htm+="FlowPlayer.swf’ width=’320′ height=’263′ id=’FlowPlayer’>"
    に変更すると、幸せになれそうな気がします
    ついでに、
    function doSkinVar($skintype) {
    echo ‘<script language="JavaScript" src="’.getAdminURL().’mov.js"></script>’;
    }
    なんて付け加えてやると、スキンのヘッダへの記述が「<%Fmovie%>」だけですんで楽になりますよ

  11. 時武 より:

    >shizukiさん
    ありがとうございます。新バージョンにがっつり反映させていただきます。

  12. yama より:

    shizukiさんのアイデアのとおりにしてみると
    無事に動くようになりました。
    getAdminURLというのはBlogURLと置換するのですね。
    あとmov.jsをもう一ヶ所書き換えましたが忘れてしまいました。
    nucleusのディレクトリまわりだったと思います。
    (サブディレクトリを掘って運用しているため)
    いろいろさわってみて、また何か気付いたことがあれば報告しますね。

  13. 時武 より:

    >yamaさん
    テストありがとうございます。
    >みなさん
    いただいたフィードバックを元にバージョンアップしてみました(pathの指定関係も修正しました)ので、また機会があれば使ってみてやってください。

  14. 長崎太郎 より:

    時武さま、ありがとうございます。
    新バージョンさっそくつかってみました。いいかんじです。
    ところで、FlowPlayerの1.5は、splashImageFileがないとき、再生待ちのとき勝手に動画の1コマ目を表示してくれるようで、これは楽でいいなあと思いました。

  15. 時武 より:

    気になって調べてみました。1.4でもautoBufferingをtrueにすると1コマ目を表示してくれるようです。mov.jsを少し変更しておきました。

  16. floors より:

    初めまして~。
    ダウンロード:NP_Fmovie 0.2のリンクをクリックして20060824-Fmovie.lzhを解凍してみたのですが、NP_Fmovie.phpのバージョン表記が0.1となっています。こちらは0.2でよろしかったでしょうか?
    ちなみに動かそうと四苦八苦中です、
    なんとか動かしたい・・・ X(

  17. 時武 より:

    こんにちは。
    アーカイブが古いものと差し変わっていたようです。もう一度ダウンロードしてみていただけますか?

  18. floors より:

    時武さま、ありがとうございます!
    見事動作致しました!
    ついででしたので自サイトでのFlowPlayerのversion別の動作情報を残しておきますね~
    ver1.4 動作
    ver1.5 不動作
    ver1.6.1 不動作
    1.5が動くかな・・・と思っていたのですが、動きませんでした、けど1.4で満足しています。
    ありがとうございました!

  19. ichirou より:

    はじめまして。
    面白そうなんで早速使わせて頂きました。
    このままでも全然OKですが、デザイン的な改良版が出たらもっと面白そうですね。
    ありがとうございました♪