prototypeウィンドウを使った動画再生　その3 ajaxとyoutubeapiによる動画再生

というわけで第3弾というわけで、こんなんつくりました。　youtubeの動画のidを入れると動画をmacライクなwindowで再生してくれるアプリです

とりあえずソースコードをさらしてみる。phpで作ったのは使えるライブラリ知ってたからです。他の言語だと調べるのに時間がかかっちゃうので(ﾉ∀｀)

html　メイン部分

<html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>macライクなwindowでyoutube再生 ver0.2 + ajax</title>

	<style>

	* {
		margin: 0px;
		padding: 0px;
	}

	#account {
		margin: 5%;
		padding: 5%;
	}
	#sample {
		margin-left: 60%;
		margin-top: 5%
	}

	</style>

	<script type="text/javascript" src="../javascripts/prototype.js"> </script>
	<script type="text/javascript" src="../javascripts/effects.js"> </script>
	<script type="text/javascript" src="../javascripts/window.js"> </script>
	<script type="text/javascript" src="youtube_set.js"> </script>

	<link href="../themes/default.css" rel="stylesheet" type="text/css" >	 </link>
	<link href="../themes/theme1.css" rel="stylesheet" type="text/css" >	 </link>
</head>
<body>
<script>

function show_youtube()
{
	var video_id = $F('input');
	//video_id = '00UcVdar3vc';
	var url = 'http://test.replore.com/youtube/ajax_2.php';
	var pars = 'video=' + $F('input');
	//$('result').innerHTML = pars;
	
	var myAjax = new Ajax.Request(
		url, 
		{
			method: 'post', 
			parameters: pars, 
			onComplete: showResponse,
			onLoading: onLoad,
			onFailure: reportError
		});
	
}

function showResponse(originalRequest)
{
	//var video_id = originalRequest.responseText.match(/title=(.*?)id=(+?)/);
	var video_contents = originalRequest.responseText;
	var video_id;
	var video_title;

	if (video_contents.match(/error/)) {
		$('result').innerHTML = "そんなvideo無いなりよ＼(^o^／:)";
		return;
	}

	video = /title=(.*?)&id=(.*?)&end/.exec(video_contents);

	$('result').innerHTML = video[1];

	if ($(video[2])){
		$('result').innerHTML = "そのvideoはもう開いてるなりよ＼(^o^／:)";
		return;
	}
		
	get_and_show_youtube_video(video[2], video[1], video[2], 50, 50);
}

function reportError(originalRequest)
{
	$('result').innerHTML = "errorナリよ(ﾉ∀｀))";
}

function onLoad()
{
	$('result').innerHTML = "now ろーでぃんぐなり";
}

get_and_show_youtube_video("title", "らき☆すた", "f4gbuRiqD2Q", 100, 250);

//get_and_show_youtube_video("higurashin", "ひぐらし you", "00UcVdar3vc", 250, 250);


</script>
<div id='result'></div>

<input type="button" value="video召還" onclick="show_youtube()">
<input type="text" size="50" value="2sXfpHM2RT8" id=input>

<div id="sample">動画のidの例<br><br>絶望先生Ending:2sXfpHM2RT8<br>ひぐらし you:00UcVdar3vc<br>おっくせんまん:XmaltChJnV0  </div>

<br>
<br>
<div id="account"> <h3> youtube動画のidをとってきて動画をmacライクなwindowで開くサンプルです.またなんか追加するつもりです.<br>
		使用方法:youtubeのvideoidを入れて、動画を召還する。無効なidを入れた場合は召還できない。<br>動画は同じidにつきひとつ。なぜ一つなのかというと、domid = youtubeidにしているので、一々変えるのが面倒だったからなのです(ﾉ∀｀)<br>
		
		マックのキーは×で動画削除。-で最小化。ただしもう一度押すと元に戻る。+は最大化。これももう一度元に戻すと元に戻る<h3></div>


		<address>replore@gmail.com</address>
</body>
</html>

jsファイル　youtube_set.js ウィンドゥにyoutubeの動画を入れるためのjavascriptファイル

/*
 * youtube_set.js
 * author replore: 2007/07/15
 */

/* set youtube video to window */
function set_youtube_video(dialog_name, video_title, video_id ) {
	video = new Window(dialog_name, {className: "dialog", title: video_title, top:0, left:0, width:"425", height:"350", zIndex:100, opacity:1, resizable: false});

    video.getContent().innerHTML='<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/' + video_id + '"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/' + video_id + '" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>'

	return video;
}


/* get and show and set movie position */
function get_and_show_youtube_video(dialog_name, video_title, video_id, px, py)
{

	obj = new set_youtube_video(dialog_name, video_title, video_id);
	obj.setDestroyOnClose();
	obj.show();
	obj.toFront();
	obj.setLocation(px, py);
}

phpファイルその１　youtubeapiを使うための関数　youtube_get_details.php

<?php

require_once 'HTTP/Request.php';

define ("YOUTUBE_URL", "http://www.youtube.com/api2_rest");
define ("DEV_ID", "your dev id! ←　もちろんこれは変える");
define ("FUNC_METHOD", "youtube.videos.get_details");

function get_videos_get_details($video_id)
{
	$request = new HTTP_Request(YOUTUBE_URL);
	$request->addQueryString('dev_id', DEV_ID); 
	$request->addQueryString('method', FUNC_METHOD); 
	$request->addQueryString('video_id', $video_id);
	if (PEAR::isError($request->sendRequest())) {
		die('request failed');
	}
	return $request->getResponseBody();
}

phpファイルその２　ajax通信部 ajax_2.php.. なんちゅー名前だ(ﾉ∀｀)　ひどいので変更するけど、なんにしようかなぁ　

<?php
require_once 'youtube_get_details.php';

header( "Content-Type: text/html; charset=UTF-8");

if (isset($_POST['video'])) {

	$sample_video_id = "00UcVdar3vc";

	$video_id = $_POST['video']; 
	$video_list = get_videos_get_details($video_id);

	$xml = new SimpleXMLElement($video_list);

	//print $xml->video_details->title; 
	if ($xml->video_details->title) { 
		echo ("title=" . $xml->video_details->title . "&id=" . $video_id . "&end");
		//echo $video_id;	
	} else {
		echo "error";	
	}

}
?>

とまぁこんな感じです。　今は説明する気力が無いのでしませんが(ﾉ∀｀)、なんかの参考になるかもしれないのでうｐしときました。

とりあえず、今回はjavascript及び、prototyp.jsに慣れるといった感じの作業内容になりました。ライブラリはやはり楽ですね(ﾉ∀｀)。

　始め、youtubeapiにjavascriptで直接アクセス用としたのですが、できずじまいだったので、しょうがないのでphpでアクセスした結果をjavascriptに送る内容のソースになってしまいました(ﾉ∀｀)　

javascriptでyoutubeapidにアクセスするには、どうすりゃいいんだろうか(´・ω・｀)...とりあえず保留です(｀・ω・´)

その４作るとしたらどうな内容にしようか.　考えた内容は以下のとおり

インターフェースがひどいので、それを改善する。
ドラッグアンドドロップで動画再生させる.
youtubeの検索もajaxで実行させ、検索＋実行をできるようにする

まぁこんなところかな