Google ドライブの動画をVideoタグで再生する方法
Google ドライブ上に存在する動画を再生する場合、主に2種類の方法が存在します。
- Google ドライブのビューワーで再生
- ダウンロードして再生
この2つの方法は Google ドライブを利用している方なら、誰しも一度はトライしたことがあるのではないでしょうか。それでは、 Google ドライブの動画ファイルをWebページに組み込む方法をご存知でしょうか?少しマニアックな方法であるため、その方法を知っている方はあまりいないのではないでしょうか。
Webページに動画ファイルを埋め込む方法は2つあります。1つがiframeでプレビューURLを埋め込む方法、そして2つ目がvideoタグで動画をプレビューさせる方法です。1つ目のiframeを使う方法を知っている方はもしかすると多いかもしれませんが、videoタグで動画を再生する方法を知っている方は少ないのではないでしょうか。今回は、 Google ドライブ上に存在する動画をiframeとvideoタグで埋め込む方法について説明します。
iframeで動画を再生する方法
iframeで Google ドライブ上の動画ファイルを再生する場合、以下フォーマットのコードをWebページに埋め込みます。iframeの縦横サイズ、及びその他属性については任意の値を設定してください。
<iframe src="<GoogleドライブURL>" width="xxx" height="yyy"></iframe>
<GoogleドライブURL>には以下のURLを埋め込みます。<ファイルID>は Google ドライブ上のファイルを一意に識別するためのIDになります。
https://drive.google.com/file/d/<ファイルID>/preview?usp=drivesdk"
videoタグで動画を再生する方法
videoタグで Google ドライブ上の動画ファイルを再生する場合、以下フォーマットのコードをWebページに埋め込みます。videoタグの縦横サイズ、及びその他属性については任意の値を設定してください。
<video src="<GoogleドライブURL>" width="800" height="450"></video>
<GoogleドライブURL>には以下のURLを埋め込みます。このURLは Google ドライブからファイルをダウンロードする場合のフォーマットになります。<ファイルID>は Google ドライブ上のファイルを一意に識別するためのIDになります。APIからURLを直接参照する場合は、Files:getメソッドを使ってFilesオブジェクトのwebContentLinkパラメーターを参照します。
https://drive.google.com/uc?id=<ファイルID>&export=download
videoタグの場合100MB以上のファイルは再生できない
説明した通り、videoタグで Google ドライブ上の動画ファイルを再生する場合 Google ドライブのダウンロードURLが必要になります。しかし、実はこのダウンロードURLには一つ大きな問題があります。
Google ドライブで100MB以上のファイルをダウンロードする場合、 Google ドライブのウィルススキャンの対象から外れてしまうため、ユーザーの同意が必要になるのです。以下は Google ドライブで実際に表示されるユーザー同意のためのダイアログです。

これが、videoタグの再生において大きな問題になります。100MB以上の動画ファイルの場合、ダウンロードURLは同意画面にリダイレクトされるため、videoタグで動画を再生することはできません。そのため、videoタグを利用する場合は、動画ファイルの容量に注意する必要があります。
まとめ
- Google ドライブ上に存在する動画をiframeとvideoタグで再生することができる
- videoタグで動画を再生する場合、100MB以上の動画は再生することができない
