nice! 1
タケル
Twitter 人気記事
はてなブックマーク人気記事
JavaScriptでYouTubeを操作するテスト (1つのボタンで2つの動画を同時再生)
» 音楽ネタ全般
YouTube プレイヤーを JavaScript から操作できる YouTube JavaScript Player API というのが Google Code で公開されているのに今日になって気づいたので、遅まきながら試しにちょこっと使ってみました。
1つのボタンで2つの動画を同時に再生・停止するテストです。
ステータスが「準備完了」になったら「PLAY」ボタンを押してみてください。
両方の動画が同時にスタートするはずです。
左の動画は右の映像にシンクロさせるために15秒付近からスタートします。
YouTube 側のレスポンスの具合で若干ずれるかもしれません。
音声は右の動画のものを使って左はミュートしています。
使っているネタは、今でも好きな Deee-Lite のデビュー曲でもあり代表曲のひとつでもある「Groove Is In the Heart」。左側がオリジナル PV で、右側がアイドルマスターのキャラを使って作られた職人さんの作品なんですが、これが選曲センスもさることながら実によくできてます。(アイドルマスターのことはよく知らないので解説は省略)
肝心の API のほうは構成もシンプルで SWFObejct を使ったサンプルページのソースコードも分かりやすく、JavaScript と DOM を知っている人ならすぐに理解できると思います。
興味のある人はぜひトライしてみてください。
参考までに上で使ったソースコード(あまり洗練されたものではないですが・・・)
[関連サイト]
Google Code - YouTube JavaScript Player API
Wikipedia : Deee-Lite
THE IDOLM@STER OFFICIAL WEB
TEI TOWA
1つのボタンで2つの動画を同時に再生・停止するテストです。
ステータスが「準備完了」になったら「PLAY」ボタンを押してみてください。
両方の動画が同時にスタートするはずです。
左の動画は右の映像にシンクロさせるために15秒付近からスタートします。
YouTube 側のレスポンスの具合で若干ずれるかもしれません。
音声は右の動画のものを使って左はミュートしています。
使っているネタは、今でも好きな Deee-Lite のデビュー曲でもあり代表曲のひとつでもある「Groove Is In the Heart」。左側がオリジナル PV で、右側がアイドルマスターのキャラを使って作られた職人さんの作品なんですが、これが選曲センスもさることながら実によくできてます。(アイドルマスターのことはよく知らないので解説は省略)
肝心の API のほうは構成もシンプルで SWFObejct を使ったサンプルページのソースコードも分かりやすく、JavaScript と DOM を知っている人ならすぐに理解できると思います。
興味のある人はぜひトライしてみてください。
参考までに上で使ったソースコード(あまり洗練されたものではないですが・・・)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
<!--
var yttest1 = { stat : 0, player1 : null, player2 : null }
var ytapiReadyCallback = [];
var STAT_LOAD = 0;
var STAT_ERROR1 = 1;
var STAT_ERROR2 = 2;
var STAT_READY = 3;
var STAT_PLAY = 4;
var STAT_STOP = 5;
var STAT_PAUSE = 6;
function onYouTubePlayerReady( playerID ){
if( playerID == "ytplayer1" ){
yttest1.player1 = $("#myplayer1").get(0);
yttest1.player1.mute();
}
if( playerID == "ytplayer2" ){
yttest1.player2 = $("#myplayer2").get(0);
}
if( yttest1.player1 != null && yttest1.player2 != null ){
yttest1.stat = STAT_READY;
yt_putStatus();
yttest1.player1.bind("onError", yt_onPlayer1Error);
yttest1.player2.bind("onError", yt_onPlayer2Error);
}
}
function yt_putStatus(){
var msg = [
"ロード中...",
"左の動画がありません",
"右の動画がありません",
"準備完了 > PLAYボタンをクリックしてください",
"再生中",
"再生停止",
"一時停止中"
];
$("#ytstatus").text("ステータス：" + msg[yttest1.stat]);
}
function yt_onPlayer1Error(){
yttest1.stat = STAT_ERROR1;
yt_putStatus();
}
function yt_onPlayer2Error(){
yttest1.stat = STAT_ERROR2;
yt_putStatus();
}
function yt_play(){
if(yttest1.stat <= STAT_ERROR2) return;
if(yttest1.stat == STAT_PAUSE){
if(yttest1.player1) yttest1.player1.playVideo();
if(yttest1.player2) yttest1.player2.playVideo();
}else{
yt_rewind(17,0);
}
if(yttest1.player1 && yttest1.player2){
yttest1.stat = STAT_PLAY;
yt_putStatus();
}
}
function yt_rewind(seek1,seek2) {
if(yttest1.stat <= STAT_ERROR2) return;
if(yttest1.player1) yttest1.player1.seekTo(seek1,true);
if(yttest1.player2) yttest1.player2.seekTo(seek2,true);
if(yttest1.player1 && yttest1.player2){
yttest1.stat = STAT_PLAY;
yt_putStatus();
}
}
function yt_stop(){
if(yttest1.player1) yttest1.player1.stopVideo();
if(yttest1.player2) yttest1.player2.stopVideo();
if(yttest1.player1 && yttest1.player2){
yttest1.stat = STAT_STOP;
yt_putStatus();
}
}
function yt_pause(){
if(yttest1.player1) yttest1.player1.pauseVideo();
if(yttest1.player2) yttest1.player2.pauseVideo();
if(yttest1.player1 && yttest1.player2){
yttest1.stat = STAT_PAUSE;
yt_putStatus();
}
}
$(function(){
yt_putStatus();
swfobject.embedSWF("http://www.youtube.com/v/C4D1HSL7P98&enablejsapi=1&playerapiid=ytplayer1&showinfo=0", "ytapiplayer1", "250", "207", "8", null, null, { allowScriptAccess: "always" }, { id: "myplayer1" } );
swfobject.embedSWF("http://www.youtube.com/v/dAjVhEFgC7c&enablejsapi=1&playerapiid=ytplayer2&showinfo=0", "ytapiplayer2", "250", "207", "8", null, null, { allowScriptAccess: "always" }, { id: "myplayer2" } );
$("#yt_playBtn").click( yt_play );
$("#yt_rewindBtn").click(function(){yt_rewind(15,0)});
$("#yt_pauseBtn").click( yt_pause );
$("#yt_stopBtn").click( yt_stop );
});
//-->
</script>
</head>
<body>
<div style="width:510px;height:280px;padding:5px;background-color:#555555">
<div id="ytapiplayer1" style="float:left;width:250px;height:207px;margin-left:5px"></div>
<div id="ytapiplayer2" style="float:left;width:250px;height:207px;"></div>
<br />
<div id="ytstatus" style="border:1px solid #FFFFFF;background-color:#DDDDDD;width:500px;height:20px;margin:10px 0"></div>
<div style="text-align:center">
<a href="javascript:void(0)" id="yt_playBtn"><img src="/_images/blog/_b81/sothis/btn_play.png" width="82" height="24" border="0" alt="再生開始" /></a>
<a href="javascript:void(0)" id="yt_rewindBtn"><img src="/_images/blog/_b81/sothis/btn_rewind-c9c3e.png" width="82" height="24" border="0" alt="最初から" /></a>
<a href="javascript:void(0)" id="yt_pauseBtn"><img src="/_images/blog/_b81/sothis/btn_pause-e6ec5.png" width="82" height="24" border="0" alt="一旦停止" /></a>
<a href="javascript:void(0)" id="yt_stopBtn"><img src="/_images/blog/_b81/sothis/btn_stop-d2ccc.png" width="82" height="24" border="0" alt="再生終了" /></a>
</div>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
<!--
var yttest1 = { stat : 0, player1 : null, player2 : null }
var ytapiReadyCallback = [];
var STAT_LOAD = 0;
var STAT_ERROR1 = 1;
var STAT_ERROR2 = 2;
var STAT_READY = 3;
var STAT_PLAY = 4;
var STAT_STOP = 5;
var STAT_PAUSE = 6;
function onYouTubePlayerReady( playerID ){
if( playerID == "ytplayer1" ){
yttest1.player1 = $("#myplayer1").get(0);
yttest1.player1.mute();
}
if( playerID == "ytplayer2" ){
yttest1.player2 = $("#myplayer2").get(0);
}
if( yttest1.player1 != null && yttest1.player2 != null ){
yttest1.stat = STAT_READY;
yt_putStatus();
yttest1.player1.bind("onError", yt_onPlayer1Error);
yttest1.player2.bind("onError", yt_onPlayer2Error);
}
}
function yt_putStatus(){
var msg = [
"ロード中...",
"左の動画がありません",
"右の動画がありません",
"準備完了 > PLAYボタンをクリックしてください",
"再生中",
"再生停止",
"一時停止中"
];
$("#ytstatus").text("ステータス：" + msg[yttest1.stat]);
}
function yt_onPlayer1Error(){
yttest1.stat = STAT_ERROR1;
yt_putStatus();
}
function yt_onPlayer2Error(){
yttest1.stat = STAT_ERROR2;
yt_putStatus();
}
function yt_play(){
if(yttest1.stat <= STAT_ERROR2) return;
if(yttest1.stat == STAT_PAUSE){
if(yttest1.player1) yttest1.player1.playVideo();
if(yttest1.player2) yttest1.player2.playVideo();
}else{
yt_rewind(17,0);
}
if(yttest1.player1 && yttest1.player2){
yttest1.stat = STAT_PLAY;
yt_putStatus();
}
}
function yt_rewind(seek1,seek2) {
if(yttest1.stat <= STAT_ERROR2) return;
if(yttest1.player1) yttest1.player1.seekTo(seek1,true);
if(yttest1.player2) yttest1.player2.seekTo(seek2,true);
if(yttest1.player1 && yttest1.player2){
yttest1.stat = STAT_PLAY;
yt_putStatus();
}
}
function yt_stop(){
if(yttest1.player1) yttest1.player1.stopVideo();
if(yttest1.player2) yttest1.player2.stopVideo();
if(yttest1.player1 && yttest1.player2){
yttest1.stat = STAT_STOP;
yt_putStatus();
}
}
function yt_pause(){
if(yttest1.player1) yttest1.player1.pauseVideo();
if(yttest1.player2) yttest1.player2.pauseVideo();
if(yttest1.player1 && yttest1.player2){
yttest1.stat = STAT_PAUSE;
yt_putStatus();
}
}
$(function(){
yt_putStatus();
swfobject.embedSWF("http://www.youtube.com/v/C4D1HSL7P98&enablejsapi=1&playerapiid=ytplayer1&showinfo=0", "ytapiplayer1", "250", "207", "8", null, null, { allowScriptAccess: "always" }, { id: "myplayer1" } );
swfobject.embedSWF("http://www.youtube.com/v/dAjVhEFgC7c&enablejsapi=1&playerapiid=ytplayer2&showinfo=0", "ytapiplayer2", "250", "207", "8", null, null, { allowScriptAccess: "always" }, { id: "myplayer2" } );
$("#yt_playBtn").click( yt_play );
$("#yt_rewindBtn").click(function(){yt_rewind(15,0)});
$("#yt_pauseBtn").click( yt_pause );
$("#yt_stopBtn").click( yt_stop );
});
//-->
</script>
</head>
<body>
<div style="width:510px;height:280px;padding:5px;background-color:#555555">
<div id="ytapiplayer1" style="float:left;width:250px;height:207px;margin-left:5px"></div>
<div id="ytapiplayer2" style="float:left;width:250px;height:207px;"></div>
<br />
<div id="ytstatus" style="border:1px solid #FFFFFF;background-color:#DDDDDD;width:500px;height:20px;margin:10px 0"></div>
<div style="text-align:center">
<a href="javascript:void(0)" id="yt_playBtn"><img src="/_images/blog/_b81/sothis/btn_play.png" width="82" height="24" border="0" alt="再生開始" /></a>
<a href="javascript:void(0)" id="yt_rewindBtn"><img src="/_images/blog/_b81/sothis/btn_rewind-c9c3e.png" width="82" height="24" border="0" alt="最初から" /></a>
<a href="javascript:void(0)" id="yt_pauseBtn"><img src="/_images/blog/_b81/sothis/btn_pause-e6ec5.png" width="82" height="24" border="0" alt="一旦停止" /></a>
<a href="javascript:void(0)" id="yt_stopBtn"><img src="/_images/blog/_b81/sothis/btn_stop-d2ccc.png" width="82" height="24" border="0" alt="再生終了" /></a>
</div>
</div>
</body>
</html>
[関連サイト]
Google Code - YouTube JavaScript Player API
Wikipedia : Deee-Lite
THE IDOLM@STER OFFICIAL WEB
TEI TOWA
- アーティスト:
- 出版社/メーカー: Elektra / Wea
- 発売日: 1994/06/17
- メディア: CD
- アーティスト:
- 出版社/メーカー: Rhino/Wea UK
- 発売日: 2002/06/27
- メディア: CD
Facebook コメント
Facebook コメントに書き込まれた質問に対する返答・回答は行いません。ご了承ください。
iTunes Store 音楽アプリベストセラー
for iPad
10件まで表示
for iPhone/iPod touch
for Mac
最新記事一覧
カテゴリー別表示
リストで一覧表示月別表示
Dropbox
こんにちは 初めて書き込みします。
ホームページを作っていますが、このページにほしい機能が、同じページに埋め込んである複数の動画ファイルをまとめて操作しようというものです。
その機能にかなり近いものが、このページに記載されているものでした。 しかし、参考のページを見てもよく理解できませんでした。
というのは、このページではyoutubeの動画を操作していますが、自分が行おうとしているものは手元にある動画ファイルをアップして操作しようとしているからです。 このあたりが良く分からず困っています。
何か教えてくれると幸いです。 よろしくお願いします。
by 九州の人 (2009-11-22 13:39)
九州の人さん、はじめまして。
あくまで「YouTubeのAPIを利用した例」なので
ほかの動画プレイヤーを制御する参考にはならないと思います。
お使いの動画プレイヤーが何なのか知りませんが、
APIなど外部から制御できる方法が用意されていないのなら
操作は難しいのではないかと思います。
お使いのプレイヤーにオートプレイ(オートスタート)が付いているのなら
一斉再生ボタンを押したときに、JavaScriptを使って複数のプレイヤーを
ロードして、ほぼ同時に再生スタート/ストップさせることは可能です。
(ただし一時停止してその続きを再生するのはおそらく無理)
by TAN (2009-11-22 14:51)
早い返事本当にありがとうございます。
私もいろいろと調べていますが、難しそうですね・・・
使っているプレーヤーはクイックタイムです。
embedタグで埋め込んでいるのですが、次のページを参考にしています。
http://support.apple.com/kb/TA26486?viewlocale=ja_JP&locale=ja_JP#moviename
この"MOVIENAME"を使いたいんですけど、上手く行かないんですよね・・・
もう少し調べてみます
by 九州の人 (2009-11-22 20:13)
>九州の人さん
教えていただいたページを参考にQuikTimeの埋め込みプレイヤーで
MOVENAMEを使ってみたら上手く動きませんでした・・・
たしかに、これどう使っていいのかよく分かりませんね。
別の方法でパラメータに ENABLEJAVASCRIPT=true を指定して、
JavaScriptから操作することができました。
IE8、FireFox3.5、Safari4 (いずれもWin版)では一応動いてます。
サンプルを作ってみたのでソースを見て参考にしてみてください。
http://www003.upp.so-net.ne.jp/bjork/qtsample.html
by TAN (2009-11-23 21:49)
わざわざ、使ってみてくれて有難うございます。
本当に使い方分からないですよね・・・
サンプルソースに関しては大変参考になり大変感謝しております。
実はなぜこのような機能を作っているのかというと、いろいろなスポーツ
(テニスとかゴルフ)のプロと一般人のフォームの違いを比べるために作成しています。
作ってくださったサンプルで、フォームの違いを比べる事は可能になったのですが、後は、再生位置の同期の問題ですよね(一つの動画の再生位置を変更すると他の動画の再生位置も同じ位置に変更される)
これが一番難しそうですね
（トラックバーとかを使わないといけないかもしれません）
by 九州の人 (2009-11-24 11:06)
スポーツのフォーム比較に使うのはなかなかいいアイディアですね。
＞再生位置の指定
コントロールバーから現在位置を GetTime() 拾ってきて、
SetTime() かSetStartTime() で指定してやればできそうだったので
いろいろやってみたのですが上手くいきませんでした。
by TAN (2009-11-24 21:01)
このあたりは中々難しいですよね・・・
javaScriptはあまり詳しくなかったのですが、作ってくださったサンプルの中で用いられていたStart()やStop（）、Gettime()など便利な関数がいろいろあるみたいですね。
少し勉強してみたいと思います。
by 九州の人 (2009-11-25 13:44)
再生位置の問題が解決しました！！
クイックタイムにばかり目がいってましたが、リアルプレーヤーのembedタグオプションに同じ機能がありました。
これを用いると、再生、一時停止、再生位置の変更などを複数の埋め込み動画に対して同時に行えるようになります。
興味がおありでしたら、下のサイトを見てみてください。
CONSOLE="_masterというコマンドを使うと可能です。
http://www.musicplat.com/tips/tc_3.html
by 九州の人 (2009-11-26 16:47)
解決してよかったです。
ただ、RealPlayerは最近は前ほど普及していない(というか忘れ去られつつある)ので、プレイヤーをインストールしていなくて再生できない人が多いかもしれません。
by TAN (2009-11-26 20:12)
再生位置の問題が解決しました!! ではありませんでした・・・
リアルプレーヤーでは、クイックタイムみたいに複数の動画を同時に再生
できないという問題があって本末転倒の結果でした。
TANさんの作ってくださったサンプルプログラムが最良のようです。
by 九州の人 (2009-11-30 02:13)
はじめまして。
下記を作成するにあたりまして、こちらの記事、大変参考になりました。
http://wasao.com/rodewasa/
有用な情報、本当にありがとうございます。
手短ですが、お礼かたがたコメントさせていただきました。
by 吟 (2012-02-29 13:32)
吟さん、コメント＆参考にして頂きありがとうございます。
わざわざ記事のHTMLのコード見ていただいたようで恐縮です。
今更ながらソースコードを記事に追加しました(動きは同じですが若干手直ししました)。
YouTube JS APIはシンプルですがアイディア次第でいろいろ面白いことができそうです。
by TAN (2012-02-29 22:08)
ですね～、この手法だとYouTubeに公式にあがっていれば、堂々とBGMとしてつかえるというか、そういうところが目から鱗でした。
ソースの掲載ありがとうございます。というか、お手数おかけして申し訳ありません。
今後共よろしくおねがいいたします m(_ _)m
by 吟 (2012-03-01 00:01)