Embedded Media Fieldの調査

プレイヤの再生前に表示する画像をどう貼り付けるか? この問題を解決することが目的です。

Embedded Media Field(Embedded Vide Field)のCustomURL(zzz_custom_url provider)では、次のようなコードを生成します。

Embedded Media Thumbnailモジュールを有効にしていても、サムネイルをサポートしていないproviderでは、生成されるコードになんら影響はありません。 コードの生成には、sites/all/modules/emfield/contrib/emvideo/provider/provider以下に各動画共有サイトの設定ファイルがあり、そのファイルが使用されます。 zzz_custom_url.incがCustom URLすなわちローカルにアップロードした動画の場合に使用されます。このファイルの内部でcase文があり、ファイルタイプで生成するコードが決まります。 flvの場合は次の通りです。

case 'flv':
 $autostart = $autoplay ? 'true' : 'false';
 return '<embed type="application/x-shockwave-flash" width="'. $width .'" height="'. $height .'" src="http://freevideocoding.com/flvplayer.swf?file='. $url .'&amp;autoStart='. $autostart .'" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high"></embed>';

src=の最初の箇所は、swfプレイヤです。プレイヤは固定であることがわかります。 file=の箇所は、$urlが入力したURLです。その後は、&でつなげてautoStartの設定となります。 autoStartの設定は、追加したフィールドの管理の設定値から取得する様です。 width,heightも同じく追加したフィールドの管理の設定値になります。 quality,type,pluginspageは固定です。 次にmp4の場合です。

case 'mp4':
 $autostart = $autoplay ?'true' : 'false';
 return '<embed type="video/quicktime" width="'. $width .'" height="'. $height.'" src="'. $url .'" pluginspage="http://www.apple.com/quicktime/download/" scale="tofit" controller="true" autoplay="'. $autostart .'"> </embed>';

mp4の場合は、quicktimeプレイヤ用の記述であることがわかります。なので、Embedded Media Fieldの設定画面でJW FLV Media Playerの設定をしても、mp4ファイルである以上、quicktimeで再生されます。

バージョン6.12以降に追加されたflowplayerに対応した箇所が次になります。

if (module_exists('flowplayer')) { $config = array( 'clip' =&gt; array( 'autoPlay' =&gt; $autoplay, 'url' =&gt; $url, ), ); $attributes = array( 'style' =&gt; &quot;width:{$width}px;height:{$height}px;&quot;, ); return theme('flowplayer', $config, 'emvideo-zzz-custom-url-embedded-video ', $attributes); } 

これはcase文の直前に記述されているため、flowplayerモジュールが有効な場合は、flowplayerが使用されます。

※ちなみにテスト環境では問題なく再生できました。 自分でアップロードする動画ファイルはmp4ですが、今回の様にファイルタイプでプレイヤを分けているケースだと、H264をサポートしているプレイヤならば、ほかの拡張子例えばflvにするだけでquicktimeプレイヤを避け、Flash Playerで再生は可能です。ただ、動画を作成したPC上と公開サーバ上で拡張子を変えるのは管理上好ましくないのでできるだけ避けたいと思います。

以上から現状の問題点

①アップロードした画像を表示する機能が実装されていない。

サムネイルサポートが”いいえ”なので当たり前ですが・・・

②好きなプレイヤー(JW FLV Media Player)が使用できない。

flvでは、http://freevideocoding.com/flvplayer.swfプレイヤー、mp4ではQuickTime、flowplayerモジュールを使えばflv,mp4区別なくflowplayerを使用します。

※②については、Embedded Media Playerのサイトで要求としてあがっていた事項なので、そのうち機能が追加されるかもしれません。

完成形を考えると、プレイヤに画像を表示するコードは、flvのケースをそのまま使うとすると以下になります。

<embed>
 src="[プレイヤーSWFのURI]?file=[動画ファイルのURI]&image=[画像のURI]&autoPlay=false"
 width="'. $width .'"
 height="'. $height .'"
 quality="high"
 type="application/x-shockwave-flash"
 pluginspage=http://www.macromedia.com/go/getflashplayer;
</embed>

src=に&image=[画像のURI]を挿入すれば画像の表示はできます。

 flowplayerの場合は、

if (module_exists('flowplayer'))
 { $config = array( 'clip' => array( 'autoPlay' => $autoplay, 'url' => $url, ), );
 $attributes = array( 'style' => "width:{$width}px;height:{$height}px;background-image:url([画像ファイル名])", );
 return theme('flowplayer', $config, 'emvideo-zzz-custom-url-embedded-video ', $attributes); }

styleにbackground-image:url([画像ファイル名])を追加すればよいだけと思いますが、画像ファイル名はURIなのか相対的なパスなのかやってみないとわかりません。

以前、Videoモジュールを使用した際もこれでハマリました。ただ、そのときよりなじみのある記述なのでなんとかなりそうです。

embedタグを使っている点は個人的に好きではありませんし、AllowFullScreenパラメータが定義されていないあたりは気になりますが、とりあえず必要な変数を取得してくることができるかどうかが重要なので、そこは後から考えることにします。

現状と完成形がはっきりしましたが、どうやって画像のURIを取得するか?です。

そういえば、Embedded Media Thumbnailを導入すると、upload video custom thumbnailという項目が追加されました。

コンテンツ作成時には、そこへthumbnail画像を指定してアップロードしています。この情報は一体どこへ行ったのでしょうか?

アップロードした画像ファイルは、files以下の指定した場所にあります。

※場所の指定は、追加したwidget_typeがemvide_textfieldsのフィールド管理画面の設定でEmbedded Custom Thumbnailsにある[画像のパス]で指定できます。ただし、同じページ下にあるThumbnailにある[Default thumbnail path:]は空欄のままでないとダメです。

コンテンツテンプレートの機能を使ってみます。

作成したvideoコンテンツタイプを開いて、テンプレートのBody Valiableで確認してみました。

※1つ以上のvideoノードが作成されていないと表示されません。

しかし、アップロードした画像ファイルに関係しそうな情報はみつかりませんでした。

そこで、次にデータベースの中を確認してみました。

テーブル名:db_prefix_content_type_[コンテンツタイプ名]

※コンテンツタイプ名は今回、videoになります。

すると、フィールド名がどこかで見たような並びです。

 [vid],[nid],[field_video_embed],[field_video_value],[field_video_provider],[field_video_data] field名を除けば,[value],[provider],[data]です。

 これは、emvideo fieldのフィールド管理画面のupload video custom thumbnailにあるデフォルト値のPHPコードに記述する並びと同じです。

ふむふむ。

前回、ここに何かを記載してできたような。

というあいまいな記憶は、正しかったのかもしれません。

しかし、ここに記載した情報はどう使われるのでしょう。

デフォルト値を変更できるのでしょうけれども、影響範囲がわかりません。少なくともemvideoのprovider以下にある各動画共有サイト向け設定の動作には何らかの影響がありそうです。

 providerを指定できるので、影響範囲も制限できるかもしれません。

さらに各フィールドの実際に格納されている情報を調べてみました。

は、入力したURL [vlaue]は、入力したURLのドキュメントルート以下のファイルパス名 [provider]は、zzz_cutom_url [data]は、連想配列?になっていて、 emvideo_zzz_cutom_url_data_version,url,mime,type,emthumbの情報があります。さらにこのemthumbが連想配列で emthumb_alt,emthumb_title,status です。このemthumb_altとemthumb_titleがアップロードした画像ファイルのファイル名を格納しています。

これから、どうやってembedコードを生成するか?ですが、カスタムfield(widget_typeがemvideo_textfields)の場合は、content_type_[コンテンツタイプ名]のテーブルに,[value],[provider],[data]の情報を格納しています。

ファイルアップロード⇒ファイルで作成したカスタムfield(widget_typeがfilefield_widget)の場合は、content_type_[コンテンツタイプ名]のテーブルに[fid],[list],[data]の情報を格納します。

あと、ファイルがアップロードされるとfilesテーブルに[fid],[uid],[filename],[filepath],[filemime],[filesize],[status],[timestamp]の情報を格納しています。 content_node_field_instanceテーブルに、[field_name][type_name][weight][label][widget_type][widget_settings][display_settings][description] [widget_module][widget_active] で、この中の[widget_settings]がフィールドの管理で設定した情報で、[display_settings]がフィールド表示で設定した情報を格納しています。

filefield_metaに、[fid][width][height][duration][audio_format][audio_sample_rate][audio_channel_mode] [audio_bitrate][audio_bitrate_mode]で、[fid]がfilesテーブルの[fid]と等しく、[width][height]は画像ファイルの高さ、幅のサイズです。

しかし、ここに格納されているのはemvideo_textfieldsでアップロードした画像ファイルはみあたりません。filefield_widgetでアップロードしたファイルのみでした。

imagefieldを使ってファイルアップロード⇒画像でファイルをアップロードするとどうなるのだろうか?

いろいろ疑問もでてきますが、これは優先順位は下位のほうなのであとまわしにするとして、とりあえず、widget_type emvideo_textfieldsのupload video custom thumbnailでアップロードするにしろ、画像用にwidget_type filefield_widgetを追加してアップロードするにしろ、画像のURIはなんとか取得できそうです。

次に、どこに完成型のコードを生成する記述をすればよいかです。

①コンテンツテンプレートファイルの本文

②themeのnode-xxxxxx.tpl.phpファイル

③providerファイル(zzz_cutom_url.inc)

②が一番きれいなソースコードになりそうですが、せっかくEmbedded Media Fieldモジュールを使っているわけですし③にしようかなぁと思います。

zzz_cutom_url.inc内のfunction名 theme_emvideo_zzz_custom_url_embedded_video をカスタマイズすればよさそうです。こういう場合は、直接書き換えるのではなくて、hook_xxxxxとかで別に作成すればいいんだっけかなぁもしかすると、サムネイルをサポートしているyoutube providerファイルを参考にすれば、emthumbモジュールを利用できるかもしれません。 またflowplayerの場合の様に、JW FLV Media PlayerのラッパーモジュールであるFLV Media Playerモジュールがあれば・・・という条件に一致する時の記述をすれば、JW FLV Media Player用も作成できそうな気がします。

あと、Embedded Media Fieldがサポートしているほかのファイルタイプ(wmv,rmなど)は、使わないので削ってしまってよさそうです。

とりあえず、今日は方向性が決まっただけでも良しとしておきます。

追記データベースの情報確認には、CLIからのSQL文とphpMyAdminでGUIで行ってましたが、develモジュールのDev Loadで簡単に参照できることに気付いていまはそれを使っています。ただ、階層が深いと見えないのかemtumbがArray 0elementsと表示され参照できません。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

大阪府門真市に生まれ、高校卒業まで京都府福知山市で育ち、大学は工学部電子工学科を卒業。半導体設計会社に勤務ののちインフラエンジニアとして監視基盤の運用設計業務に就く。現在は都内の施設に勤務。横浜在住。人の役に立てることができればいいなと日々思っています。

目次