【html/Googleドライブ】Googleドライブで公開設定にした動画をhtmlのvideoタグで表示する

　Googleドライブに動画をアップロードし、公開設定にしたそのURLにアクセスすると動画が再生されます。
　動画として読み込めるならhtmlのvideoタグで再生できないものか、と気になって調べたところできるようだったので今回はその備忘録です。

　基本的には参考資料に挙げているページ様そのままなので、詳しくはそちらを参照してください。

　では、始めます。

１：videoタグについて
　htmlのvideoタグを使うことで動画を再生できます。

　動画と再生ボタンなどをただ表示させたいだけの場合は、srcに動画ファイルのパスとcontrolsオプションを記述するのみで再生できます。

<!-- 記述例(htmlファイルと同じ階層にtest.mp4がある場合) -->
<video src="./test.mp4" controls></video>

　この他にも色々とオプションはありますが、詳しくは参考資料にも挙げている以下のページ様を参照してください。

【保存版】HTML5・videoタグでHPに動画を埋め込む方法まとめ | リチカクラウドスタジオ（RICHKA CLOUD STUDIO）

２：Googleドライブで公開設定にした動画をvideoタグで表示する方法
　まずはvideoタグで表示させたい動画を公開設定にします。やり方は各自で調べるようお願いします。

　Googleドライブ上の対象動画ファイルを右クリックして「共有」→「共有」をクリックします。

　一般的なアクセスが「リンクを知っている全員」の公開設定になっていることを確認し、左下の「リンクをコピー」ボタンをクリックしてリンクをコピーします。

　コピーしたリンクをエディタに貼り付けると以下のような形式になっています。

// ファイルID部分は英数字記号の文字列
https://drive.google.com/file/d/[ファイルID]/view?usp=sharing

　このリンクをvideoタグで読み込めるよう、以下のように書き換えます。

https://drive.google.com/uc?id=[ファイルID]

　書き換えたものをvideoタグのsrcの部分に記述すれば表示できるようになります。

３：サンプルコード
　では実際に表示させてみます。以下の内容をコピペしてvideo_test.htmlという名前で保存してください。

・video_test.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Cache-Control" content="no-cache">
  <title>video test</title>
</head>
<body>
  <video
    src="https://drive.google.com/uc?id=1zeK4Sv8HUd9N9QilLvSmzbsr__sMYnXO"
    width="50%"
    height="50%"
    controls
    playsinline
    loop>
  </video>
</body>
</html>

　video_test.htmlを保存できたら、インターネットにつながっている状態でvideo_test.htmlをブラウザで開いてみてください。
　ブラウザで開くと、少し動画が読みこまれる表示が出た後、以下のように動画再生ができるようになります。ちなみにここで指定している動画は過去に本ブログで公開した動画です。