APPOFIT > WordPress > WordPressテンプレートカスタマイズ > 動画プレーヤーをショートコードで実装する

動画プレーヤーをショートコードで実装する

WordPressに動画プレーヤーをショートコードとして実装する方法です。
記事投稿の際、動画をアップロードすることができますが、WordPressにはプレーヤーが実装されておらず、動画ファイルへのリンクのみしか挿入することができません。
そこで、生成されたリンクの動画ファイルURLをショートコードにセットすることで、プレーヤーとして出力するためのコードを作ってみました。

実際のコードを見る前に、動画プレーヤー出力部分の処理出し分けの条件をご説明します。
動画プレーヤーは、フラッシュを使ったFLVプレーヤーと、その他の動画をQuick Timeで再生するための埋込プレーヤーに分けています。
FLVプレーヤーの方では、当然FLVプレーヤー本体が必要となりますので、swfobject.jsとplayer.swfはご自身で準備をお願いいたします。
(サンプルコードでは、swfはテンプレートディレクトリのルートに、jsはテンプレートディレクトリ配下のjsディレクトリに配置するものとして記述しています)

では、実際のコードです。

function sc_movie($atts, $content = null) {
	extract(shortcode_atts(array(
		"src" => '',
		"width" => '480',
		"height" => '360',
		"autoplay" => 'false',
		"controller" => 'true'
	), $atts));
	if(!empty($src)){
		if (function_exists('is_ktai') && is_ktai()){
			return '動画あり(PCで再生可能です)';
		}else{
			$retpc = '';
			if(preg_match('/.flv$/i',$src)){
				$mediaid = substr($src,strrpos($src,'/')+1,strlen(substr($src,strrpos($src,'/')+1))-4);
				$retpc  = '<div id="' . $mediaid . '"><script type="text/javascript" src="' . get_bloginfo('template_directory') . '/js/swfobject.js"></script></div>' . "\n";
				$retpc .= '<script type="text/javascript">' . "\n";
				$retpc .= 'var so = new SWFObject("' . get_bloginfo('template_directory') . '/player.swf","ply","' . $width . '","' . $height . '","9","#000000");' . "\n";
				$retpc .= 'so.addParam("allowscriptaccess","always");' . "\n";
				$retpc .= 'so.addParam("wmode","opaque");' . "\n";
				$retpc .= 'so.addVariable("file","' . $src . '");' . "\n";
				$retpc .= 'so.write("' . $mediaid . '");' . "\n";
				$retpc .= '</script>' . "\n";
			}else{
				$retpc  = '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="' . $width . '" height="' . $height . '" codebase="http://www.apple.com/qtactivex/qtplugin.cab">' . "\n";
				$retpc .= '<param name="src" value="' . $src . '" />' . "\n";
				$retpc .= '<param name="autoplay" value="' . $autoplay . '" />' . "\n";
				$retpc .= '<param name="controller" value="' . $controller . '" />' . "\n";
				$retpc .= '<embed src="' . $src . '" width="' . $width . '" height="' . $height . '" autoplay="' . $autoplay . '" controller="' . $controller . '" pluginspage="http://www.apple.com/quicktime/download/">' . "\n";
				$retpc .= '</object>' . "\n";
			}
			return $retpc;
		}
	}
}
add_shortcode("movie", "sc_movie");

先頭に携帯電話の振り分けがありますが、この振り分けにはktai_styleプラグインを使用しています。
ただし、WordPressの管理画面からは3gp動画をアップすることができませんので、ここではPCから閲覧してくださいという文言を入れるだけにしています。

ショートコードの呼び出しは以下のように記述します。

[movie src=”http://example.com/wp-content/uploads/2010/06/test.flv” width=”480″ height=”360″ autoplay=”false” controller=”true”]

動画プレーヤーをショートコードで実装するへのコメント

コメント一覧 (0件)

コメントはまだありません。

動画プレーヤーをショートコードで実装する 関連記事

rel="next"およびrel="prev"を使ったページ区切り

複数ページの関連性を示すrel=prev/nextとwordpressの問題

Googleが、複数ページにまたがる記事の関連性を知らせるためのHTMLタグをサポートしました。 rel="nex… [2011/12/05]
ヴィジェットの作成

オリジナルのヴィジェットを作成する

WordPressのテーマで使えるヴィジェットについて、最初から用意されているもの以外にオリジナルのヴィジェットを使いた… [2011/01/19]
Googleマップをショートコードで実装する

Googleマップをショートコードで実装する

WordPressのテンプレートにGoogleマップをショートコードで実装する方法をご紹介します。 Googleマップ… [2010/12/14]
記事一覧をカスタムフィールドでソートする

記事一覧をカスタムフィールドでソートする

記事一覧をカスタムフィールドでソートしたいという要望を受けて調べていたところ、実は記事取得のパラメータ指定で実装できると… [2010/12/14]
検索結果でのパンくずに対応するテンプレート記述

検索結果でのパンくずに対応するテンプレート記述

Googleの検索結果に表示されるパンくずのマークアップが可能となりましたので、WordPressのテンプレートを対応さ… [2010/09/08]