動画アップロードの仕組みについては、「Embedded Media Field」モジュールを使うのをやめました。
現在は、「Filefiled」モジュールを使用して行っています。
具体的な方法は以下のとおりです。
１．動画用のコンテントタイプを新規作成
動画をアップロードする際はこのコンテントタイプを使用します。
２．作成したコンテントタイプにフィールドを追加
以下、３つのフィールドを追加しました。
| 用途 | ラベル | ウィジットタイプ |
| ビデオファイルアップロード用 | video_files | ファイルアップロード |
| 画像ファイルアップロード用 | image_files | ファイルアップロード |
| URLリンク用 | link_url | テキストフィールド |
ビデオファイルと画像ファイルはそれぞれアップロードできるファイルの拡張子を指定しておきます。
※ビデオファイルと画像ファイルを指定間違いしないためにも拡張子を指定することをお勧めします。ファイルサイズの制限も指定しておいたほうが良いと思います。
※ビデオファイルと画像ファイルは必須にチェックをしておきます。これにより記載保存時に指定忘れがなくなります。
また、アップロードする場所をそれぞれ「videos」と「images」にしてあります。
URLリンク用は、リネージュ2公式ブログに動画の内容の記事を記載した場合に使うために用意したものです。
動画を作成したらかならず記事を書くわけではありませんが、その内容をこのサイトに記載するのもあれなのでそうしてあります。
３．作成したコンテントタイプのノードテンプレートをカスタマイズ
カスタマイズするノードテンプレートファイルは使用しているテーマの「node_tpl.php」をコピーして「node-movies_tpl.php」として保存し作成します。
「movies」が１番で作成したコンテンツタイプのタイプ名です。※nodeとコンテンツタイプ名の間は「ハイフン」です。「アンダーバー」ではありませんので注意してください。
私の場合は「simply_modern」テーマを使用していますのでその直下に以下の内容のファイルを作成しました。
ティーザー表示部分と全文表示部分があります。
あとThinckBoxでプレイヤーが表示されます。
<?php
// $Id: node.tpl.php,v 1.3 2009/05/04 14:16:18 jrglasgow Exp $
?>
<div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">
<?php if ($picture) { print $picture; }?>
<div class="top-label">
<h2 class="title"><a href="<?php print $node->field_link_url[0]['value']?>"><?php print $title?></a></h2>
</div>
<?php if ($teaser): ?>
<div class="content-media-teaser">
<?php
$movie = $node->field_video_files[0]['filepath'];
$thumb = $node->field_image_files[0]['filepath'];
?>
<span class="content-video-thickbox-teaser">
<script type="text/javascript" src="/mediaplayer/swfobject.js"></script>
<div id='siege_movies-<?php echo $nid;?>' style="display: none;">
<script type="text/javascript">
var so = new SWFObject("/mediaplayer/player.swf", "video", "640", "532", "10.0.42.34", "#FFFFFF","high");
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','/<?php echo $field_video_files[0]['filepath'];?>');
so.addVariable('image','/<?php echo $field_image_files[0]['filepath'];?>');
so.addVariable("volume","75");
so.addVariable("autostart","true");
so.addVariable('backcolor','000000');
so.addVariable('frontcolor','666666');
so.addVariable('lightcolor','666666');
so.addVariable('screencolor','000000');
so.write('siege_movies-<?php echo $nid;?>');
</script>
</div>
<a href="#TB_inline?width=642&height=540&inlineId=siege_movies-<?php echo $nid;?>" class="thickbox"><img src="/<?php echo $field_image_files[0]['filepath'];?>" border="0" width="300" height="240" alt="<?php print $title?>" /></a>
</span>
</div>
<?php endif; ?>
<?php if (!$teaser): ?>
<div class="content-media">
<?php
$movie = $node->field_video_files[0]['filepath'];
$thumb = $node->field_image_files[0]['filepath'];
?>
<span id="content-video-thickbox">
<script type="text/javascript" src="/mediaplayer/swfobject.js"></script>
<div id='siege_movies-<?php echo $nid;?>' style="display: none;">
<script type="text/javascript">
var so = new SWFObject("/mediaplayer/player.swf", "video", "640", "532", "10.0.42.34", "#FFFFFF","high");
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','/<?php echo $field_video_files[0]['filepath'];?>');
so.addVariable('image','/<?php echo $field_image_files[0]['filepath'];?>');
so.addVariable("volume","75");
so.addVariable("autostart","true");
so.addVariable('backcolor','000000');
so.addVariable('frontcolor','666666');
so.addVariable('lightcolor','666666');
so.addVariable('screencolor','000000');
so.write('siege_movies-<?php echo $nid;?>');
</script>
</div>
<a href="#TB_inline?width=642&height=540&inlineId=siege_movies-<?php echo $nid;?>" class="thickbox"><img src="/<?php echo $field_image_files[0]['filepath'];?>" border="0" width="300" height="240" alt="<?php print $title?>" /></a>
</span>
</div>
<?php endif; ?>
</div>
以下の$movieと$thumbの箇所でそれぞれビデオファイルと画像ファイルのパス名を取得しています。 これさえできればあとは、通常のFlashPlayerの埋め込みHTMLにそれぞれ指定するだけでOKです。
<?php
$movie = $node->field_video_files[0]['filepath'];
$thumb = $node->field_image_files[0]['filepath'];
?>
url_linkは、NCブログに動画に関する記事を記載した場合に使うのですが、前のバージョンのプレーヤーはコントロールバーにリンクボタンがありました。そこに使う予定でしたが、今のバージョンのプレーヤーにはデフォルトでは用意されていないので、タイトルにリンクを作成しています。
※埋め込みFlashPlayerは、JW Playerを使用しています。事前にサーバに配置しておく必要があります。
４．記事を作成
作成した動画用コンテントタイプを使って動画記事を掲載すればサーバにアップロードされます。
５．見せ方
以上でサーバには動画ファイルと画像ファイルがアップロードされていますので、あとはどう見せるかだけです。
通常、記事を投稿すればフロントページに追加されますが、当サイトではフロントページをカスタマイズしているため、動画コンテンツは最新記事にはリストされません。
１つ１つ記事を参照して動画を再生するのは面倒と思い「動画プレイリスト」ページとトップページにあるスライドショーですべての動画が再生できるようにしてあります。
（１）動画プレイリスト
プレイリスト用のページコンテンツを作成して、そこにはプレイリストファイルを使用してプレイヤーを埋め込んでいます。
使用しているプレイリストは、MediaRSS形式で作成してあります。（※JW Player 4.XまではXSPF形式で作成していましたがVer5.Xになってうまく表示できなくなったので変えました）
<script type='text/javascript' src='/mediaplayer/swfobject.js'></script>
<div id="mymovies">This text will be replaced</div>
<script type='text/javascript'>
var so = new SWFObject('/mediaplayer/player.swf','mpl','940','545','10.0.42.34');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('playlistfile','/playlists/LineageII.xml');
so.addVariable('backcolor','111111');
so.addVariable('frontcolor','cccccc');
so.addVariable('lightcolor','66cc00');
so.addVariable('screencolor','000000');
so.addVariable('playlistsize','300');
so.addVariable('playlist','right');
so.addVariable('skin','http://www.longtailvideo.com/jw/upload/stylish.swf');
so.write('mymovies');</script>
MediaRSS形式の生成は、手書きでしていましたが面倒なので「Views」でコードを生成するようにしてそれをコピー＆ペーストでプレイリストに追加しています。
（２）スライドショー
こちらは少し複雑にしてあって、「Views」、「Views Slideshow」、「Views Slideshow ddblock」モジュールを使用したの方法と「Ddblock」モジュールを使用した方法があるのですが、後者を使用しています。
※2011.05.06 動きのあるものがトップページにあればと思って導入していましたが、IEで再生がうまくリセットできないのでスライドショー表示はやめ、代わりにプレイリストプレイヤーを配置しました。
こんな感じでこのサイトの動画公開方法は落ち着いています。
あとは、携帯端末からも再生できるようにしてみようかと考えています。
