Google ドライブの動画をVideoタグで再生する方法
Google ドライブ上に存在する動画を再生したい場合、あなたはどのような選択をおこないますか？想定できるのは以下２つのパターンになると思います。
- Google ドライブのビューワーで再生
- ダウンロードして再生
２つのパターンを挙げましたが、大体の動画ファイルは Google ドライブ上で再生できると思いますので、2の選択肢をとることはあまりないかもしれません。それでは、 Google ドライブ上の動画ファイルをWebページに組み込む場合は、どのような選択をおこないますか？Webページに動画ファイルを埋め込む方法にも２つの選択肢が存在します。
- iframeにプレビューURLを埋め込む方法
- videoタグに動画を埋め込む方法
１つ目のiframeを使う方法を知っている方はもしかすると多いかもしれませんが、videoタグで動画を再生する方法を知っている方は少ないのではないでしょうか。今回は、 Google ドライブ上に存在する動画をiframeとvideoタグで埋め込む方法について説明します。
iframeで動画を再生する方法
iframeで Google ドライブ上の動画ファイルを再生する場合、以下フォーマットのコードをWebページに埋め込みます。iframeの縦横サイズ、及びその他属性については任意の値を設定してください。<GoogleドライブURL>にはドライブファイルのURLを埋め込みます。
<iframe src="<GoogleドライブURL>" width="xxx" height="yyy"></iframe>
ドライブファイルのURLフォーマット
ドライブファイルのURLは以下フォーマットで指定する必要があります。<ファイルID>は Google ドライブ上のファイルを一意に識別するためのIDになります。このURLを直接ブラウザから参照することも可能です。
https://drive.google.com/file/d/<ファイルID>/preview?usp=drivesdk"videoタグで動画を再生する方法
videoタグで Google ドライブ上の動画ファイルを再生する場合、以下フォーマットのコードをWebページに埋め込みます。videoタグの縦横サイズ、及びその他属性については任意の値を設定してください。<GoogleドライブURL>にはドライブファイルのURLを埋め込みますが、iframeバージョンで埋め込んだ時のフォーマットとは異なる仕様になります。
<video src="<GoogleドライブURL>" width="800" height="450" controls></video>
ドライブファイルのURLフォーマット
ドライブファイルのURLは以下フォーマットで指定する必要があります。このURLは Google ドライブからファイルをダウンロードする場合のフォーマットになります。<ファイルID>は Google ドライブ上のファイルを一意に識別するためのIDになります。 このURLはドライブから直接ファイルをダウンロードしたい場合のフォーマットになります。
https://drive.google.com/uc?id=<ファイルID>&export=downloadドライブ APIからファイルのダウンロードURLを直接参照する場合は、 ドライブ APIの Files:get APIを使ってFilesオブジェクトのwebContentLinkパラメーターを参照します。
videoタグを利用する上での注意点
Google ドライブ上のファイルをvideoタグで再生できることは大きなメリットに思えます。例えば、CSSやVideoタグ向けのライブラリを利用して、独自の動画再生プレーヤーを構築することができます。しかし、このvideoタグを利用した動画ファイル再生にはいくつか注意すべきポイントがあります。
videoタグの場合100MB以上のファイルは再生できない
Google ドライブで100MB以上のファイルをダウンロードする場合、 Google ドライブのウィルススキャンの対象から外れてしまうため、ユーザーの同意が必要になるのです。以下は Google ドライブで実際に表示されるユーザー同意のためのダイアログです。これが、videoタグの再生において大きな問題になります。100MB以上の動画ファイルの場合、ダウンロードURLは同意画面にリダイレクトされるため、videoタグで動画を再生することはできません。そのため、videoタグを利用する場合は、動画ファイルの容量に注意する必要があります。
Google ドライブは大多数のユーザーに動画を提供するプラットフォームではない
Google ドライブは仕様として今回説明したような手段を提供していますが、そもそも Google ドライブはファイル共有のためのサービスであり、動画再生の機能を提供することが目的のプラットフォームではありません。社内等、限られた範囲での公開であれば問題はないですが、大多数のユーザーからのアクセスが予想されるコンテンツをvideoタグ経由で公開する場合、 Google から制限をかけられる可能性があります。そのようなケースでは、 Google クラウドが提供する Google Cloud Storage を利用して、可用性とスケーラビリティを担保しましょう。
まとめ
如何でしたでしょうか。今回は、Google ドライブ上の動画をWebページに埋め込む２つのテクニックについて解説しました。もちろん、今回説明した方法にはいくつかの制約が存在することは事実ですが、適切な範囲での共有であれば問題はありません。 Google ドライブの活用をより促進するために、今回のテクニックを有効活用していきましょう。
