16.Googleドライブ内の動画の配信

1. はじめに

Googleドライブに保存した動画を外部公開設定にし、その共有タグ（iframeタグ）をedulioに埋め込むことで、eラーニング用の動画として活用できます。

大量の動画をeラーニングシステムで使用する場合、この方法で大幅なコスト削減が可能です。

しかし、Googleドライブで取得できる共有タグをそのまま利用すると、動画内に表示される動画ファイルへのリンクボタンから動画をダウンロードできてしまいます。

そこで、本ページでは「Googleドライブの共有タグ取得方法」と「動画ファイルへのリンクボタンを無効化した共有タグの作成方法」と「edulioへの共有タグの貼り付け方」について説明します。

2. Googleドライブの共有タグの取得方法

googleドライブに保存してある動画ファイルを確認します

動画ファイルをクリックし、再生画面を表示します。（この画面はプレビュー画面です。）

画面右上の三点リーダーをクリックします。

「新しいウィンドウで開く」をクリックします。

再び三点リーダーをクリックすると「アイテムを埋め込む」が表示されますので、「アイテムを埋め込む」をクリックします。

共有タグ（iframeタグ）が表示されますので、コピーしてメモ帳等に貼り付けておきます。

3. 動画ファイルへのリンクボタンを無効化した共有タグの作成方法

コピーした共有タグのうち、赤文字の部分だけをコピーします。

<iframe src="https://drive.google.com/file/d/xxxxxxxxxxxxxxxxx/preview" width="640" height="480" allow="autoplay"></iframe>

下記タグの赤文字の部分に、先ほどコピーした共有タグの赤文字を差し替えてください。

差し替えたら、下記タグをすべてコピーします。

<div style="position:relative;height:0;overflow:hidden;padding:0 0 56.25% 0">
<iframe src="https://drive.google.com/file/d/xxxxxxxxxxxxxxxxx/preview" width="100%" height="100%" frameborder="0" scrolling="no" allowfullscreen style="position:absolute;top:0;left:0"></iframe></div>
<div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;"> </div>

4. edulioへの共有タグの貼り付け方

edulioの管理画面を開き、チャプターの編集画面まで進みます。

タイトルを入力し、形態は「iframe」を選択します。

続いて、埋め込みに先ほど作成・コピーした共有タグを貼り付けます。

画面下部の「登録」をクリックします。

登録した動画をプレビューで確認します。

動画が綺麗に表示されていれば完了です。

先ほどのタグを使用したことで、動画の画面内に動画ファイルへのアクセスボタンが表示されますが、クリックしてもリンク先に移動することができなくなります。

なお、今回ご説明したiframeタグの記載によるリンクボタンの無効化は、画面の表示を誤魔化す程度の簡易的な細工です。

JavaScriptが分かる方であれば、ボタンを有効にする書き換えが比較的容易にできてしまう点にご注意ください。