Skip to content

Instantly share code, notes, and snippets.

@iZRIdJJ53S

iZRIdJJ53S/app.js

Last active December 13, 2015 17:48
Show Gist options
  • Save iZRIdJJ53S/4950033 to your computer and use it in GitHub Desktop.
Save iZRIdJJ53S/4950033 to your computer and use it in GitHub Desktop.
Download ZIP
Youtube-PlayerAPIを使って、picotubeもどきを作ってみる
Raw
app.js
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path');
var app = express();
var io = require('socket.io');
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
app.get('/', routes.index);
var server = http.createServer(app);
server.listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
io = io.listen(server);
io.sockets.on('connection', function(socket) {
//console.log('io-connect-server');
// 投稿ボタンが押されたら
socket.on('submit1-c2s', function(message) {
// ボタン押した本人だけに通知
socket.emit('vid-s2c', {'message': message, 'owner': true});
// 本人以外の全員に通知
socket.broadcast.emit('vid-s2c',
{'message': message, 'owner': false}
);
});
// Play受信
socket.on('play-c2s', function(data) {
// 全員に通知
io.sockets.emit('play-s2c', {'current_time': data.current_time});
});
// stop受信
socket.on('stop-c2s', function() {
io.sockets.emit('stop-s2c');
});
// pause受信
socket.on('pause-c2s', function() {
io.sockets.emit('pause-s2c');
});
// 接続が切れた場合
socket.on('disconnect', function(message) {
console.log('disconnect');
});
});
Raw
routes-index.js
/*
* GET home page.
*/
exports.index = function(req, res){
res.render('index', { title: 'api-demo' });
};
Raw
views-index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<p>視聴したいYoutubeのURLをtextboxに入力して送信</p>
<p>例：http://www.youtube.com/watch?v=wCDGte6_wos</p>
<input type="text" id="text1" size="50" value="">
<input id="submit_1" type="submit" value="投稿">
<br /><br /><br />
<div id="msg_area"></div>
<div id="ytapi_div_parent">
<div id="ytapi_div_player"><!-- // ここがswfオブジェクトに置き換えられる --></div>
</div>
<div id="yt_control_area" style="display:none;">
<a href="javascript:void(0);"><img src="/images/play.png" id="yt_play" /></a>
<a href="javascript:void(0);"><img src="/images/stop.png" id="yt_stop" /></a>
<a href="javascript:void(0);"><img src="/images/pause.png" id="yt_pause" /></a>
</div>
<script>
// socket.io connect
var socket = io.connect();
// connect 完了
socket.on('connect', function() {
console.log('接続方式：' + socket.socket.transport.name);
});
// 受信
socket.on('vid-s2c', function (data) {
//console.log(data);
$('#msg_area').text(data.message);
var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
var atts = { id: "yt_attr_player" };// このIDでplayerをコントロールする
// swfの書き出し
swfobject.embedSWF(
'http://www.youtube.com/apiplayer?enablejsapi=1',
"ytapi_div_player", "425", "356", "8", null, null, params, atts
);
// コントロールパーツの表示
if (data.owner) {
$('#yt_control_area').show();
}
});
// play受信
socket.on('play-s2c', function (data) {
// 再生実行
__playVideo(data.current_time);
});
// stop受信
socket.on('stop-s2c', function (data) {
__stopVideo();
});
// pause受信
socket.on('pause-s2c', function (data) {
__pauseVideo();
});
// submit
var sendMessage = function() {
var tmp_val = $('#text1').val();
var youtube_vid = tmp_val.match(/[&\?]v=([\d\w-]+)/);
var message = '';
if (youtube_vid && youtube_vid[1]) {
message = youtube_vid[1];
}
// クリア
$('#text1').val('');
$('#msg_area').empty();
// サーバーへ送信
socket.emit('submit1-c2s', message);
};
// 送信
$("#submit_1").click(function() {
sendMessage();
});
// プレーヤー参照の取得
function onYouTubePlayerReady(playerId) {
// 動画再生の準備
var vid = $('#msg_area').text();
//console.log('vidOK-----' + vid);
var yt_attr_obj = $('#yt_attr_player').get(0);
//yt_attr_obj.cueVideoById(vid, 0);
yt_attr_obj.loadVideoById(vid, 0);
yt_attr_obj.pauseVideo();
}
// yt play
$('#yt_play').click(function() {
// 動画の現在時間取得する
var current_time = $('#yt_attr_player').get(0).getCurrentTime();
current_time = parseInt(current_time);
if (!current_time) {
current_time = 0;
}
// 動画の現在時間付きで送信
socket.emit('play-c2s', {'current_time': current_time});
});
// yt stop
$('#yt_stop').click(function() {
socket.emit('stop-c2s');
});
// yt pause
$('#yt_pause').click(function() {
socket.emit('pause-c2s');
});
// playの共通処理
function __playVideo(current_time) {
// 動画時間が1秒未満ならすぐ再生
if (current_time < 1) {
$('#yt_attr_player').get(0).playVideo();
// 1秒以上なら、seek後に再生
// ずれを微調整する為
} else {
$('#yt_attr_player').get(0).seekTo(current_time, true);
$('#yt_attr_player').get(0).playVideo();
}
};
// stopの共通処理
function __stopVideo() {
$('#yt_attr_player').get(0).stopVideo();
};
// pauseの共通処理
function __pauseVideo() {
$('#yt_attr_player').get(0).pauseVideo();
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment