Site icon Drive Hack

Google ドライブの動画をVideoタグで再生する方法

ドライブマニア

Google ドライブ上に存在する動画を再生する場合、主に２種類の方法が存在します。

  1. Google ドライブのビューワーで再生
  2. ダウンロードして再生

この２つの方法は Google ドライブを利用している方なら、誰しも一度はトライしたことがあるのではないでしょうか。それでは、 Google ドライブの動画ファイルをWebページに組み込む方法をご存知でしょうか？少しマニアックな方法であるため、その方法を知っている方はあまりいないのではないでしょうか。

Webページに動画ファイルを埋め込む方法は２つあります。１つがiframeでプレビューURLを埋め込む方法、そして２つ目がvideoタグで動画をプレビューさせる方法です。１つ目の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タグを利用する場合は、動画ファイルの容量に注意する必要があります。

まとめ

Exit mobile version