今回は、YouTubeで指定した秒数から動画を再生できるようにしてみましょう。やり方は、「YouTubuの動画をJavaScriptで再生制御する方法」と基本的に同じですので、そちらもご参考ください。

サンプルで作成したものは、10秒目と30秒目から動画をスタートするものです。1つの長い動画で、区切り目から再生したい場合、使えるかもしれません。


JavaScriptで制御をかけていますが、ポイントは、seekTo(10, true) という記述を付けている点です。10は、10秒目から、trueは実行のたびに問い合わせを行い移動できるようにします。falseだと、再生ヘッドが指定秒を超えている場合、リクエストを行わないため、期待どおり動作しません。

function seekPlayVideo1(){
ytplayer.seekTo(10, true );
}

別ウインドウでサンプルを動かす

指定位置からの再生は、JavaScriptを使わず、パラメーターで指定したい場合は、start=10 という記述でも動作します。この場合、10秒目からスタートします。複数指定できないため、用途としては、指定した所の映像を見て欲しいと相手に伝える場合、便利だと思います。

src="https://www.youtube.com/embed/-mSucY5pXXU?start=10"



別ウインドウでサンプルを動かす

JavaScriptでYouTubeの動画を制御してみましょう。
プログラムで制御することで、任意のタイミングで動画を再生したり、別の動画に切り替えることができます。

今回は、シンプルに動画を表示した後、JavaScriptで「再生」「一時停止」「最初から再生」「別の動画に切り替える」ことができるサンプルを作ってみました。



ポイントとなるコード記述は、「動画部分」の箇所で、動画表示を行います。「制御部分」は、コントローラ下の各リンクをクリックしたとき、再生、一時停止といった制御をしているので、書き換えることでいろいろな動作を行うことができます。


swfobject.js は、JavaScriptでFlashの制御を行うライブラリです。ダウンロードして利用します。
https://code.google.com/p/swfobject/

制御に関しては、「YouTube ActionScript 3.0 Player API リファレンス」をご参考ください。
https://developers.google.com/youtube/flash_api_reference?hl=ja

自動再生などの制御方法も載っていますので参考になると思います。なお、この方法は、YouTubeの映像をHTML5ビデオとして再生することは出来ませんので、iOSでは表示することはできません。注意が必要です。

別ウインドウでサンプルを動かす

Popcorn MakerはWeb上の動画にライブコンテンツ
(写真や地図、リンク、ソーシャルメディアのフィードなど) を簡単に追加できるツールです。
個人的な興味で試しにどんなものか使ってみました。
今回は動画内にリンクを設置してみます。

PopcornMakerのサイトにアクセスするとStart a projectというボタンがあるので
そこから新規プロジェクトが作成できます。

https://popcorn.webmaker.org/

※ユーザ登録が必要です



新規プロジェクトが立ち上がりました。
まず加工する動画を指定します。


Mediaタブを選択するとデフォルトで何かの動画が指定されているのでここを任意の動画の
URLに書き換えます。


書き換えるとApplyボタンが現れますので押して適用させます。
デフォルトでいくつかイベントが配置されていますが、不要なのでClear track eventsに
チェックを入れます。



任意の動画が読み込まれました。
早速この動画にイベントを追加していきましょう。


EventsタブからPopupを選択して動画上にドラッグします。



Popupが追加されました。
イベントは画面上どこでも配置できますし、タイムライン上では表示するタイミングや長さなど
自由に変えられます。
テキストの変更やリンク設定、ちょっとしたデザイン変更等簡単に行えます。



今回はこんな感じにしました。



保存するとShareタブが有効になり、加工した動画のURLが生成されます。



Embedコードをブログに貼り付けるとこうなります。



いかがでしょう。
アイデア次第で色々と面白いことが出来そうです。

簡単ですが今回は以上です。

Googleドライブは、ドキュメントの作成や管理などに利用されるオンラインストレージです。もともとは、Googleドキュメントと呼ばれ、文書、スプレッドシート、プレゼンテーションを作成するサービスでしたが、現在は、画像など、どんなファイルでもアップロードして管理することができます。

ここで意外と、知られていない？機能に、動画ファイルもアップロードできて、しかも、インターネット上に公開することができます。今回は、実際に動画をアップロードしてみて、どのような感じかを見てみましょう。

Googleドライブで、動画ファイルをアップロードすると「マイドライブ」の中にファイルが置かれます。



ここで、ファイルを選択して、「その他」のメニューから「共有」を選ぶと、自分だけでなく、インターネット上に公開することができます。

「共有するリンク」に表示される長いアドレスが、ほかの閲覧者がアクセスするときのアドレスになります。そして、そのアドレスに対して、アクセスできる共有設定を行います。



検索エンジンに登録されても良い場合は、「ウェブ上で一般公開」を選択して、登録されたくない場合は、「リンクを知っている全員」を指定します。閲覧者が特定されて、Googleのアカウントを持っている場合は、「限定公開」になります。自分で共有設定をしない場合は、この設定がデフォルトとなり自分のアカウントのみが閲覧できる状態になります。



ここでは、「ウェブ上で一般公開」の設定で検索エンジンにも登録されても良い。という設定にしました。アクセスは、閲覧者がコメントを残せるかを指定できます。

Googleドライブ上のファイルは、何人かで共同作業をするためのツールとして考えられているため、ドキュメントにコメントを付けたり、リビジョン管理で変更前の状態に戻すことができます。

公開すると、このような感じで動画を見ることができます。


https://docs.google.com/file/d/0B0EVjOw7_HKEOWo2T3RqNU12bEk/edit

また動画の埋め込み機能もついていて、ブログなどに埋め込むことができます。



実際に、YouTubeと埋め込みの動画の比較のために、サンプルを作り並べてみました。下のリンク先を見てみてください。

https://bizvalley.co.jp/asset/01/youtube_google_drive.html

よく似ていますが、YouTubeとの違いをざっくり挙げると

• YouTubeへのリンクが付かない
• 共有動画サイトに動画をアップロードしなくてよい、安心感
• Googleドライブのディスク容量を気にする必要がある
• 最大1GBまでの動画をアップロード公開することができる
• 自動再生など、パラメータを付けた再生制御などカスタマイズすることはできない
• YouTubeではアップロード拒否される、著作権的にアレな動画もアップロードできる
• 再生ボタンなどのツールバーが常に表示される
• ページ埋め込みにすると、自動的に画面中央に動画を表示（スクロール）しようとする

また共有の制限に関しては、下記リンクを参照してみてください。
http://support.google.com/drive/bin/answer.py?hl=ja&answer=2494827

YouTubeなど動画共有サイトを利用せず、一部の方に動画の確認してもらう方法として、オンラインストレージを利用する方法は、知っておくと良いかもしれません。また、Googleドライブだけでなく、Dropboxなどほかのオンラインストレージでも、動画公開できるものがありますので、いろいろ違いを見てみるのもいいかもしれません。

今回は、埋め込み動画でループ再生をできるように試してみましょう。簡単そうにできそうですが、試してみるとちょっとひと癖ありました。YouTubuのPlayerAPIをみると、loop=1 を設定すればできると書いてあります。埋め込みコードを取得して、loop=1 を付け足すと下のようになります。

例）
<iframe width="510" height="315" src="https://www.youtube.com/embed/-mSucY5pXXU?loop=1" frameborder="0" allowfullscreen></iframe>


別ウインドウで再生

ループしましたか？ループしなかったと思います、なぜでしょうね。。そこで今度は、動画をリスト登録して、そのなかで再生させてみます。

例）
<iframe width="560" height="315" src="https://www.youtube.com/embed/-mSucY5pXXU?list=PLtli0zS9dE691Ol27YlY8waTSSUAaQS1l&loop=1" frameborder="0" allowfullscreen></iframe>


別ウインドウで再生

今度は、無事 ループしたと思います。ループ再生したいときは、リスト内で再生する感じでしょうか。リスト内では、すべての動画を再生すると、ループ指定により初めの動画に戻りますので、好きな動画をリスト化してループ再生したり、川のせせらぎ音など環境音楽をずっとループ再生するのもいいかもしれません。