動画共有サービス無料で使える動画共有サービス（YouTube以外）
TwitVid
Twitter上で動画やWebカメラで撮影した動画を共有
2011/1/16
Twitvidは、動画ファイルあるいはWebカメラで撮影した動画を共有できるサービスです。
動画の再生回数などアクセス状況も測定できます。
Twitvidサービスへのログインは、Twitterアカウントを使用します。
Twitterの他、任意でFacebook、MySpace、YouTubeにも同時投稿可能です。
「●●●@twitvid.com」という動画アップロード専用のメールアドレスが発行されるので、動画のメール添付投稿も可能です。
| 動画URL形式 | http://www.twitvid.com/動画ID |
|---|---|
| 対応 | PC/iPhone/Android/Blackberry |
| サービス連携 | YouTube, MySpace, Facebook |
| アップロード可能な動画形式 | 3gp, 3g2, asf, asx, avi, flv, m4v, mkv, mov, mp2, mp4, mpg, mpeg, ogv, qt, wmv |
下記のようなマイページを持つことができます。
動画の埋め込み
動画はiframe形式で埋め込むことができます。 アップした動画は、動画埋め込みコード（Embeded Code）をブログやWebページの設置したい位置にコピペするだけで簡単に埋め込めます。 動画には、再生、一時停止、ミュート、全画面再生、Twitter＆Facebookへの共有ボタン、動画のローテーション機能が付いています。
TwitVidの設置サンプル（iframe）サンプルを見る
<iframe
title="Twitvid video player"
class="twitvid-player"
type="text/html"
width="480" height="360"
src="http://www.twitvid.com/embed.php?guid=SBKW4"
frameborder="0"
></iframe>
Object/Embed形式で埋め込む場合は下記のようになります。
TwitVidの設置サンプル（object/embed）サンプルを見る
<iframe
title="Twitvid video player"
class="twitvid-player"
type="text/html"
width="480" height="360"
src="http://www.twitvid.com/embed.php?guid=SBKW4"
frameborder="0"
></iframe>
ウィジェットの設置例
また、自分がアップした動画をカルーセル表示するウィジェットも提供されています。 ウィジェットコードをブログにコピペすれば簡単に埋め込めます。
Widgetの設置サンプルサンプルを見る
<object width="300" height="400">
<param name="movie" value="http://www.twitvid.com/widget/cocoism"></param>
<param name="allowFullScreen" value="true"></param>
<embed type="application/x-shockwave-flash"
src="http://www.twitvid.com/widget/cocoism"
quality="high"
allowscriptaccess="always"
allowNetworking="all"
allowfullscreen="true"
wmode="transparent"
height="400" width="300"
></object>
twitvideo
Twitter上で動画や写真を共有
2011/1/16
twitvideoは、動画ファイル、写真、スライドをTwitter上で共有できるサービスです。
Twitvidサービスへのログインは、Twitterアカウントを使用します。
| 動画URL形式 | http://twitvideo.jp/動画ID |
|---|---|
| 対応 | PC/iPhone/携帯 |
| サービス連携 | YouTube, MySpace, Facebook |
| アップロード可能な動画形式 | （iPhoneから）3gp（携帯から）3gp, 3g2, 3gpp2（PCから）avi, wmv, flv, rm, m4v, mp4, mov, mpeg, mpg, 3gp, 3g2 |
動画の埋め込み
動画はJavaScript形式（scriptタグ）で埋め込むことができます。 アップした動画は、動画埋め込みコードをブログやWebページの設置したい位置にコピペするだけで簡単に埋め込めます。 埋め込んだ動画には、再生、一時停止、ミュート、全画面再生機能が付いていますが、共有機能は付いていません。
TwitVidの設置サンプル（script）サンプルを見る
<script type="text/javascript" src="http://twitvideo.jp/js/fmp.js"></script>
<p id="player1">Please install the <a href="http://www.macromedia.com/go/getflashplayer">Flash Player</a></p>
<script type="text/javascript">
var FO = {
movie:"http://twitvideo.jp/swf/dVideoPlayerVer2.swf",
width:"600",
height:"420",
majorversion:"7",
build:"0",
bgcolor:"#FFFFFF",
allowfullscreen:"true",
wmode:"transparent",
flashvars:"BOI01=6ea3d4ee031f401a871f5b67c57b714d855777286394e08a78ab2738883cf47337f9594c5d1edc686880118ecaf5c464b49260ee315a50cb20e885fdfab4da38ecec9fa9317710ebe070f57b9e2b5654&BOI02=92bf7ffcc32c88c6ba882e5e7c020e2118a6068a995fcf0eb32bc0a157ad3dd4942483e2a52d95a8f169eb01ded947df64b3796c6d2424b58acd898a6d0ff046&BOI03=1b038fb10a71b63112540e39f02f8115&BOI04=%E3%81%A4%E3%82%93%E3%81%A4"
};
UFO.create( FO, "player1");
</script>
Object/Embed形式で埋め込む場合は下記のようになります。
TwitVidの設置サンプル（object/embed）サンプルを見る
<iframe
title="Twitvid video player"
class="twitvid-player"
type="text/html"
width="480" height="360"
src="http://www.twitvid.com/embed.php?guid=SBKW4"
frameborder="0"
></iframe>
vimeo
YouTubeのような動画共有サイト（HD動画対応）
2011/1/16
vimeoは、YouTubeのように動画を共有できるサービスです。 無料アカウントの場合は1週間に500MBまでしかアップできないなどの制限がありますが、十分使えます♪ HDでの再生にも対応しているため高画質で動画を公開することができます。 HDでの再生はVimeoサイト上のみとなっており、WebページにVimeo動画を埋め込んだ場合にHDボタンをクリックすると、その場ではHD再生はされず、Vimeoサイト上でみるよう誘導されます。
| 動画URL形式 | http://vimeo.com/動画ID |
|---|---|
| 対応 | PC |
| アップロード可能な動画形式 | asf, asx, avi, divx, dv, dvx, m4v, mov, mp4, mpeg, mpg, qt, wmv, 3g2, 3gp, 3ivx, 3vx |
動画の埋め込み
動画はiframe形式（新式）またはobject/embed形式（旧式）で埋め込むことができます。 埋め込みオプションとして、プレーヤーサイズ、タイトル表示の有無、カラー、テキストリンクの有無、説明文表示の有無、自動再生の有無、ループ再生の有無等をカスタマイズできます。 アップした動画は、動画埋め込みコードをブログやWebページの設置したい位置にコピペするだけで簡単に埋め込めます。 埋め込んだ動画には、再生、一時停止、ミュート、全画面再生機能、HD再生、共有機能が付いています。
埋め込みオプション
埋め込んだ動画vimeoの設置サンプル（iframe）サンプルを見る
<iframe src="https://player.vimeo.com/video/18833959?autoplay=1&loop=1" width="400" height="225" frameborder="0"></iframe> <p><a href="http://vimeo.com/18833959">Sleeping Dog!</a> from <a href="https://vimeo.com/user5750510">cocoism</a> on <a href="https://vimeo.com/">Vimeo</a>.</p> <p>寝ているところ。</p>
vimeoの設置サンプル（object/embed）サンプルを見る
<object width="400" height="225"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=18833959&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=ff0179&fullscreen=1&autoplay=1&loop=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=18833959&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=ff0179&fullscreen=1&autoplay=1&loop=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225"></embed></object><p><a href="http://vimeo.com/18833959">Sleeping Dog!</a> from <a href="http://vimeo.com/user5750510">cocoism</a> on <a href="http://vimeo.com">Vimeo</a>.</p><p>寝ているところ。</p>
ウィジェットの設置例
ブログやWebページに自分がアップした動画ギャラリーを簡単に設置できるウィジェットが提供されています。 TV風、バッチの2タイプあり、それぞれ表示数や色など見た目のカスタマイズも可能です。
vimeoのウィジェット設置サンプル（TV風）サンプルを見る
<object type="application/x-shockwave-flash"
width="400" height="300"
data="http://vimeo.com/hubnut/?user_id=user5750510&color=c9ff23&background=000000&fullscreen=1&slideshow=1&stream=videos&id=&server=vimeo.com">
<param name="quality" value="best" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="scale" value="showAll" />
<param name="movie" value="http://vimeo.com/hubnut/?user_id=user5750510&color=c9ff23&background=000000&fullscreen=1&slideshow=1&stream=videos&id=&server=vimeo.com" />
</object>
<br><br>I put <a href="http://vimeo.com/user5750510/videos">videos I create</a> on Vimeo. You can see <a href="http://vimeo.com/user5750510">my profile</a>.
vimeoのウィジェット設置サンプル（バッチ）サンプルを見る
<style type="text/css">
.vimeoBadge { margin: 0; padding: 0; font: normal 11px verdana,sans-serif; }
.vimeoBadge img { border: 0; }
.vimeoBadge a, .vimeoBadge a:link, .vimeoBadge a:visited, .vimeoBadge a:active { color: #3A75C4; text-decoration: none; cursor: pointer; }
.vimeoBadge a:hover { color:#00CCFF; }
.vimeoBadge #vimeo_badge_logo { margin-top:10px; width: 57px; height: 16px; }
.vimeoBadge .credit { font: normal 11px verdana,sans-serif; }
.vimeoBadge .clip { padding:0; float:left; margin:0 10px 10px 0; width:80px; line-height:0; }
.vimeoBadge .caption { font: normal 11px verdana,sans-serif; overflow:hidden; width:80px; height: 30px; }
.vimeoBadge .clear { display: block; clear: both; visibility: hidden; }
</style>
<div class="vimeoBadge">
<script type="text/javascript" src="http://vimeo.com/user5750510/badgeo/?stream=all&stream_id=&count=9&thumbnail_width=80&show_titles=yes"></script>
</div>
oEmbed APIの使用例
oEmbed APIでは、vimeoの動画情報をJSONまたはXML形式ですることができます。
http://vimeo.com/api/v2/ユーザー名/videos.xml
videos.xml
<?xml version="1.0" encoding="utf-8"?>
<videos>
<video>
<!-- 動画ID -->
<id>18833959</id>
<!-- タイトル -->
<title>Sleeping Dog!</title>
<!-- 説明文 -->
<description>寝ているところ。</description>
<!-- 動画URL -->
<url>http://vimeo.com/18833959</url>
<!-- 公開日時 -->
<upload_date>2011-01-16 00:30:41</upload_date>
<!-- サムネイル画像（大・中・小） -->
<thumbnail_small>http://b.vimeocdn.com/ts/118/800/118800869_100.jpg</thumbnail_small>
<thumbnail_medium>http://b.vimeocdn.com/ts/118/800/118800869_200.jpg</thumbnail_medium>
<thumbnail_large>http://b.vimeocdn.com/ts/118/800/118800869_640.jpg</thumbnail_large>
<!-- ユーザ名 -->
<user_name>cocoism</user_name>
<!-- ユーザーページURL -->
<user_url>http://vimeo.com/user5750510</user_url>
<!-- プロフィール画像（特大・大・中・小） -->
<user_portrait_small>http://a.vimeocdn.com/portraits/defaults/d.30.jpg</user_portrait_small>
<user_portrait_medium>http://a.vimeocdn.com/portraits/defaults/d.75.jpg</user_portrait_medium>
<user_portrait_large>http://a.vimeocdn.com/portraits/defaults/d.100.jpg</user_portrait_large>
<user_portrait_huge>http://a.vimeocdn.com/portraits/defaults/d.300.jpg</user_portrait_huge>
<!-- お気に入り登録数 -->
<stats_number_of_likes>0</stats_number_of_likes>
<!-- 再生回数 -->
<stats_number_of_plays>0</stats_number_of_plays>
<!-- コメント数 -->
<stats_number_of_comments>0</stats_number_of_comments>
<!-- 期間 -->
<duration>15</duration>
<!-- 動画の幅（px） -->
<width>640</width>
<!-- 動画の高さ（px） -->
<height>360</height>
<!-- タグ -->
<tags>pet, dog</tags>
</video>
</videos>
下記の例では、oEmbed APIを使用して指定したユーザーの動画情報をJSON形式で取得して表示してみました。
http://vimeo.com/api/v2/ユーザー名/videos.json?callback=?
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript">
$(function() {
$.getJSON(
"http://vimeo.com/api/v2/user5750510/videos.json?callback=?",
function(data) {
$('#load').fadeOut();
$.each(data, function(i,item){
var s='';
s+='<dt><a href="http://vimeo.com/'+item.id+'"><img src="'+item.thumbnail_small+'" /></a></dt>';
s+='<dd>';
s+='<div class="title"><img src="'+item.user_portrait_small+'" /> <a href="http://vimeo.com/'+item.id+'">'+item.title+'</a> by <a href="/'+item.user_url+'">'+item.user_name+'</a></div>';
s+='<p>説明文：'+item.description+'</p>';
s+='<p>';
s+='公開日：'+formatDate(item.upload_date)+'｜';
s+='お気入り登録数：'+addFigure(item.stats_number_of_likes)+'回｜';
s+='コメント数：'+addFigure(item.stats_number_of_comments)+'回｜';
s+='再生回数：'+addFigure(item.stats_number_of_plays)+'回';
s+='</p>';
s+='<p>';
s+='タグ：'+item.tags+'px｜';
s+='動画の幅：'+item.width+'px｜';
s+='動画の高さ：'+item.height+'px';
s+='</p>';
s+='</dd>';
$("#demo").append('<dl class="video cf">'+s+'</dl>');
$(".video").fadeIn(1000);
});
}
);
});
/* 日付フォーマット */
var formatDate = function(dateString) {
var d = new Date(dateString);
var day = d.getDate();
var month = d.getMonth()+1;
var year = d.getFullYear();
return year+"年"+month+"月"+day+"日";
}
/* 3桁区切り */
function addFigure(str) {
var num = new String(str).replace(/,/g, "");
while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
return num;
}
</script>
<!-- CSS -->
<style type="text/css">
img{
vertical-align:middle;
}
#demo {
margin:0; padding:0;
}
#demo dl {
margin:5px 0; padding:0;
clear:both;
}
#demo dt {
margin:0; padding:3px;
width:100px; height:75px;
-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
border:1px solid #ccc;
float:left;
clear:both;
overflow:hidden;
}
#demo dt img {
overflow:hidden;
width:100px; height:75px;
}
#demo dd {
margin:0 0 0 120px; padding:0;
}
#demo dd p {
margin:3px 0; padding:0;
font-size:80%;
}
#demo dd div.title {
font-size:110%;
font-weight:bold;
}
#demo dd span {
color:#ff6699;
font-weight:bold;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<h2>指定したユーザーのvimeo動画リストを取得して表示</h2>
<p>参照：<a href='http://vimeo.com/api/docs/oembed'>oEmbed API</a></p>
<!-- CODE -->
<div id="load"><img src='/content/img/ajax/loadingIcon.gif'></div>
<div id="demo"></div>
<!-- / CODE -->
</div>
</body>
</html>
flickr
動画・写真共有
2011/1/16
Flickrは写真だけでなく、動画も共有することができます。
| 動画URL形式 | http://www.flickr.com/photos/ユーザーID/動画ID/ |
|---|---|
| 対応 | PC |
| アップロード可能な動画形式 | avi, wmv, mov, mpeg, 4gp, m2ts, ogg, ogv |
動画の埋め込み
動画はobject/embed形式で埋め込むことができます。 プレーヤーサイズ、最初にタイトル＆オーナー情報を表示するかの有無等をカスタマイズできます。 アップした動画は、動画埋め込みコードをブログやWebページの設置したい位置にコピペするだけで簡単に埋め込めます。 埋め込んだ動画には、再生、一時停止、ミュート、全画面再生、共有（URL、埋め込みコード）、コメントページへのリンク機能が付いています。
flickrの設置サンプル（iframe）サンプルを見る
<object type="application/x-shockwave-flash"
width="400" height="225"
data="http://www.flickr.com/apps/video/stewart.swf?v=71377"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="flashvars" value="intl_lang=en-us&photo_secret=ed81fea000&photo_id=5359095359&flickr_show_info_box=true"></param>
<param name="movie" value="http://www.flickr.com/apps/video/stewart.swf?v=71377"></param>
<param name="bgcolor" value="#000000"></param>
<param name="allowFullScreen" value="true"></param>
<embed
type="application/x-shockwave-flash"
src="http://www.flickr.com/apps/video/stewart.swf?v=71377"
bgcolor="#000000"
allowfullscreen="true"
flashvars="intl_lang=en-us&photo_secret=ed81fea000&photo_id=5359095359&flickr_show_info_box=true"
height="225"
width="400">
</embed>
</object>