動画・音声プラグイン　Viper Video Quicktags 　FLV embed　Dewplayer など

Category: 初心者向け WordPress講座 Tags: 画像・動画・音声

ここではサイトを楽しく彩る、YouTube、Googleビデオといった無料動画、FLV、MPEG４などの動画ファイル、およびMP３音声ファイルをサイトに簡単に表示するプラグインについて紹介しています。

作成支援の無料ツールもいくつかピックアップしていますので、楽しいサイト作りのお役に立てて下さい。

§ もくじ

1. Viper Video Quicktags
2. FLV embed
3. 動画関連のお役立ち無料ソフト
4. その他の動画・音声プラグイン

§ Viper Video Quicktags

まず、動画プラグインの雄と言えるのが、『Viper Video Quicktags』。

http://wordpress.org/extend/plugins/vipers-video-quicktags/

名前からして、ダニエル・クレイグ００７のファンでしょうか？

私も動画プラグインはいろいろ試しましたが、コードがシンプルで、デザインが豊富な点では、一番使いやすいプラグインだと思います。

動画コンテンツを多用される方にはおすすめです。

まず、公式サイトからプラグイン・ファイルをダウンロードし、pluginsフォルダにアップロードして、管理画面で有効化します。

管理画面左メニューの『Video Quicktags』から設定を開くと、各動画サービスの設定画面が現れるので、よく使うサービスの「Show Editor Button?」にチェックを入れ、デフォルトの動画サイズを決定します。
縦横の比率を維持する場合は、Keep Aspect Ratioにチェックを入れます。

次に「Additional Setting」で、動画の配置を決めます。
その他の設定は、特にこだわりが無ければ、デフォルトのままで構いません。

次に、「YouTube」「GoogleVideo」などよく使うサービスのデザインを設定します。
私個人としては、あまりハデハデにしないことをおすすめします（見にくいので）

たとえばYouYubeの動画を記事に挿入する場合、エディタボタンの「YouTube」をクリックすると、次の画面が現れます。
リンクとサイズを指定してOKをクリックします。

記事内には次のように挿入されます。

その他の引数は、Settingの「Help」で確認することができます。

青いテキストをクリックすると、詳細がスライドで現れます。

ピンキーな実例。

自前のFLVファイルを挿入する場合は、次のように記載します。

たとえば、サーバーの「video」フォルダにアップロードしたsophie.flv という動画を表示したい場合。
タイトルやポジション、マージンなどは、divタグで指定します。

cssの記述

同じvideoフォルダに、名前の同じjpg画像ファイル（この場合、sophie.jpg ）を置くことで、サムネイルを表示することができます（デフォルトの状態は真っ黒）。

スキンのデザインは、Settingの「Flash Video(FLV)」の中から選べます（たくさんあります）

以上です(^^)

とても簡単なので、動画が好きな方はぜひ使ってみて下さい。

§ FLV embed

YouTubeの埋め込みはもちろん、FlashやJavascriptといった、手の込んだ演出が可能な動画プラグイン『FLV embed』もおすすめです。（J-POPの大ファンみたい）

http://www.channel-ai.com/blog/plugins/flv-embed/#install

プラグインを有効化したら、まず設定画面で、画像サイズやデザインなどを決定します。

「Sitemap」・・FLVデータをカスタムフィールドに自動的に登録します

「Poster」・・ポスター画像（サムネイル）の置き場所を設定します。

「FLV」・・flvファイルを特定のフォルダにアップロードする場合、絶対パスもしくは相対パスを設定します。

「RSS」・・フィードにどのように表示するか設定します。（ポスター画像だけ、リンクだけ等）

「Player」・・独自のプレイヤー・ファイル.swfを使用する場合、ファイルの置き場所を設定します。

記事に埋め込む場合は、次のタグを使用します。

[flv url width height]

デフォルトのサイズを適用する場合は、width, height　の設定は不要です。

記入例

実例

サーバーにアップしたflvファイルを使う場合は、まず、設定画面でファイルの置き場所を指定します。
ファイル別にパスを指定する場合は、空欄でかまいません。

ポスター画像を使用する場合は、「Display poster image for embedded FLV movies」にチェックを入れ、画像の置き場所を指定します。通常、ビデオと同じフォルダが分かりやすいです。
使用しない場合、もしくは、ファイル別にパスを指定する場合は、空欄でかまいません。

記事内には次のようなコードを記入します。
個別にパスを指定する場合は、「/video/macross.flv」のようになります。

実例

ポスター画像を作るには、再生した画像を適当な場面でキャプチャ（Print Screen）し、画像編集ソフト（『JTrim』など）で切り抜くのが一番簡単です。

動画の表示位置をスタイルシートで指定する場合は、お使いのテーマ・テンプレートのCSSファイルに次のタグを追加します。

#player1, #player2, #player3 {text-align: center;}

「#player1」というのは、同一記事内に表示される動画ファイルの連番みたいなもので、たとえば、一つの記事内に5つの動画をずらずら表示する場合は、上記に「#player4」「#player5」を追加すれば、5つの動画にCSSの設定が反映されるようになっています。

これも非常に簡単なプラグインなので、おすすめです。

ただし自前のFLVファイルとYouYubeにしか対応していないので、いろんな動画サービスを利用したい方は、上記のViper Video Tagsがおすすめです。

★一口メモ★

「Viper Video Quicktags」や「FLV embed」を使用する場合、動画ファイルを変換せず、mpeg4のままアップロードして、ファイルの拡張子だけ.flvに変えてもOKです。

たとえば、YouTubeから落とした「macross.mp4」を、ファイル変換せずにサーバーにアップロードし、拡張子だけ「macross.flv」に書き換えてもFLVプレイヤーで再生可能、という意味です。

§ 動画関連のお役立ち無料ソフト

YouTube、ニコニコ動画を落とすなら、『Smiledownloder』が一押しです。

http://janesoft.net/downloader/

動作も軽く、ほとんど邪魔になりません。

ただ、YouTube側がサーバーの仕様を変更すると、ダウンロードできなくなる事があるので、その時は、バージョンアップを待ちます。

ビデオ変換するなら、『Any Video Converter』が、画質、サイズなども細かく設定できるので便利です。

無料版の場合、使う度に「購入しませんか？」のメッセージが出たり、セキュリティソフトによっては、「このソフトがコンピュータの情報を不正に送信しようとしています」といった警告が出たりしますが、それが気にならなければ、どうぞ。

http://jp.any-video-converter.com/

もっと手っ取り早く動画から音声ファイルを取り出したい場合は、「えこでこツール」がおすすめです。

動画ファイルをドラッグ＆ドロップして、クリックするだけで音声ファイルに変換してくれます。

http://www.vector.co.jp/soft/winnt/art/se445019.html

複数のファイルも一発変換が可能です。

フリーの画像編集ソフトで、非常に高機能なものといえば、『Photoscape』がダントツです。

こんなにすごいものを本当に無料で使っていいの？？　というぐらい充実しています。

http://www.photoscape.org/ps/main/index.php

§ その他の動画・音声プラグイン

動画、音声といったメディアファイルを一括して管理、表示するなら、『wordTube』がなかなか面白いです。

http://wordpress.org/extend/plugins/wordtube/

これはフォト・ギャラリーのようにメディア・ファイルをID順にライブラリーで整理して、短いコードで簡単に埋め込みが出来るものです。

View数をカウントしたり、オリジナルのプレイリストを作成することができます。

ただ、シンプルに動画を埋め込むだけなら、これほど多機能は要らないので、動画・音声主体のサイトを構築しているマニアックな人に向いています。

mp3などの音声ファイルだけ埋め込むなら、「Dewplayer」がおすすめです。

http://www.royakhosravi.com/?p=3

シンプルな３つのデザインの中から選べます。

設定画面でデザインを指定します。

表示したい場所に、次のコードを埋め込みます。
上から、絶対パス、相対パス、連続再生の場合は、| で区切って、ファイルを指定します。

たとえば、mpeg4として落とした動画を、「Any Video Converter」や「えこでこツール」を使ってmp3音声だけ抽出して、Dewplayerで再生する、というのも面白いかもしれませんね。

それでは楽しいサイト作りを！

Ads