毎年発生する自然災害ですが、「100年に一度」という災害が、全く同じではないですが、毎年発生しているのって、「1年に一度やろ！」とテレビのニュースを見て突っ込んでいる下駄です。
GooglePhotoの写真を保存しておくと自動的にアルバムを作ってくれるシステムがすごく好きで、自分の子供の過去の写真のアルバムなどを楽しんで見ているのですが、もう少し簡単にこれができると、色々な使い方ができると考えて、ライブラリを作ってみました。
ホームページなどに設置して手軽に動画再生をすることができます。
Slide-Mov
GitHub
https://github.com/yugeta/slide_mov
設置は、ライブラリのjsファイルを読み込んで、オプションを設定したインスタンスを起動するだけです。
オプションに画像ファイルのパスや音声ファイルのパスなどを登録してあげるだけです。
任意の文字を入れることもできるので、タイトルやエンドロールのような効果もつけることが可能です。
サンプル動画
※音が出るので、再生ボタンを押す際は気をつけてください。
サンプルのソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Slide-Mov</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script src="slide_mov.js?ver0.0.3"></script>
</head>
<body>
<h1>Sample</h1>
<div id="slide_mov" style="width:400px;height:300px;"></div>
<script>
new $$slide_mov({
"contents" : {
"images" : [
{"id":1 , "file":"sample/images/1.jpg"},
{"id":2 , "file":"sample/images/2.jpg"},
{"id":3 , "file":"sample/images/3.jpg"},
{"id":4 , "file":"sample/images/4.jpg"},
{"id":5 , "file":"sample/images/5.jpg"},
{"id":6 , "file":"sample/images/6.jpg"},
{"id":7 , "file":"sample/images/7.jpg"},
{"id":8 , "file":"sample/images/8.jpg"},
{"id":9 , "file":"sample/images/9.jpg"},
{"id":10 , "file":"sample/images/10.jpg"}
]
},
"animations" : [
{"in":0,"out":80,"fi":2 , "fo":2 , "fade-mode":"cross" , "mode":"zoom-in" , "sort":"random" , "images_id":[1,2,3,4,5,6,7,8,9,10]},
{"in":1 , "out":10 , "fo":3 , "text" : "動画のタイトル" , "style":"font-size:20px;"},
{"in":13, "out":80 , "mode":"scroll-up" , "text" : "エンドロール<br><br><br>改行コードを入れて<br>エンドロールのような<br>効果を出せます。<br><br><br>□□□□□ □□□□□<br>□□□□□ □□□□□<br>□□□□□ □□□□□<br>□□□□□ □□□□□<br>□□□□□ □□□□□<br><br><br>□□□□□ □□□□□<br>□□□□□ □□□□□<br>□□□□□ □□□□□<br>□□□□□ □□□□□<br>□□□□□ □□□□□<br><br><br>□□□□□ □□□□□<br>□□□□□ □□□□□<br>□□□□□ □□□□□<br>□□□□□ □□□□□<br>□□□□□ □□□□□<br>□□□□□ □□□□□<br>□□□□□ □□□□□<br>□□□□□ □□□□□<br>□□□□□ □□□□□<br>□□□□□ □□□□□<br><br><br>□□□□□ □□□□□<br>□□□□□ □□□□□<br>□□□□□ □□□□□<br>□□□□□ □□□□□<br>□□□□□ □□□□□" , style:"font-size:12px;"},
{"sound_file":"sample/sounds/%E7%A0%82%E6%B5%9C%E3%82%92%E9%A7%86%E3%81%91%E3%82%8B%E9%9D%92%E6%98%A5%E3%82%92%E7%9A%84%E3%81%AABGM.mp3?raw=true"}
]
})
</script>
</body>
</html>
※画像ファイル、音声ファイルは、ご自身の環境に合わせてパスを書き換えてご使用ください。
こんな使い方ができるよ
1. イベントなどのプレゼンテーション
スライドを画像で用意して、秒数区切りでタイミングなどを指定したり、文字を任意のタイミングで表示することで、動画を作らなくてもプレゼン資料を作ることができます。
動画ファイルと違って、修正なども簡単にできる上、容量が軽いというのがメリットですね。
また、時間が決まっているプレゼンテーションにおいては、結構役立つかもしれませんね。
2. 結婚式のその場で動画再生
撮影した写真をサーバーにアップする仕組みさえあれば、複数の動画と、お気に入りの音楽を元に、結婚式のムーディーな動画演出をすることができます。
リアルタイムに撮影した写真を使うことで演出クオリティもグッとアップすること間違いなしです。
3. アルバム写真垂れ流し
ハードディスクになむっている写真を一式サーバーにアップできれば、ローカルPCで再生したり、スマホのブラウザで動画を見ることも可能になります。
手軽なアルバム共有なども可能になりますね。
※サーバーアップするスキルは必要になりますが・・・
0 件のコメント:
コメントを投稿