はてなブログでGoogle Driveにアップしたオリジナル動画を公開する2つの方法

　少し前にアニメーションGIFを使った記事をアップしましたが、

retiresaki.hatenablog.com
はてなブログではイメージ画像以外のファイルをアップできません。動画を公開する場合は、Youtubeなどを経由して公開することになります。
しかし、簡単な説明に使うようなものまでYoutubeで公開する必要がない場合、Webサイトだけを知っている人だけに公開したい場合などは、不便になる場合があります。
　アニメーションGIFであれば、あくまでも画像ファイルなので問題ありませんが、ファイルサイズが大きくなってしまうのが欠点です (^^ゞ
それでも、記事の中に動画を使って分かりやすくしたり、目を引く記事にしたい場合があります。

そこで、Google Driveにアップしたオリジナル動画をはてなブログで公開する方法を紹介します (^^♪

1. 動画を用意

　サンプルとして、jpegからMP4形式の動画を作成します。
IE8以下は再生できませんがセキュリティ上IE8以下は無視しても良いでしょう。また、スマフォやタブレットで再生できるので、MP4で良いと思います。
※ すでに動画が有る方はスキップです (^^ゞ

(1) ffmpeg を使って、jpegを動画に変換

　　ex. ffmpeg -r 2 -i image_%05d.jpg test1.mp4

　同一フォルダー内に存在する image_00001.jpg〜image_99999.jpg の画像ファイルを昇順にoutput.webmという名前の動画ファイルを作成します。

(2) ffmpeg の引数

-r <2>	rate 1秒あたりのフレーム数
-i <image_%05d.jpg>	入力ファイル
<test1.mp4>	出力ファイル

(3) ffmpeg のヘルプ

$ ffmpeg -h long	標準のヘルプより詳細な情報を表示
$ ffmpeg -h full	すべてのオプションも含めたヘルプ
$ ffmpeg -formats	使用可能なフォーマット一覧
$ ffmpeg -codecs	使用可能なコーデック一覧

2. 作成した動画を Google Drive にアップ

　Googleドライブにアップロード後、動画ファイルを共有設定しますが、『リンクを知っている全員が閲覧可』にすることがキーポイントです。
これにより作成したURLを他者に知らせない限り、このURLを使ったWebページでのみ閲覧できるようになります。

『リンクをコピー』で共有URLを取得します。
※このURLはvideoタグで表示するときに使います。

さらにサブメニューから『新しいウィンドウで開く』をクリックし、

そのウィンドウのサブメニューの『アイテムを埋め込む...』で、

埋め込み用のタグを取得します。
※このタグはブログにタグを埋め込む時に使います。

3. ブログに貼り付けます。

(1) 埋め込みタグを使用

HTML code

<iframe src="https://drive.google.com/file/<ここのコードが動画によって違います>/preview" width="500" height="282"></iframe>

(2) 共有URLを使用 (HTML5 videoタグを使用)

　スマフォやタブレットなどのモバイルブラウザーは内蔵されているOSのバージョンやブラウザーによって、Videoタグの挙動が変わりますので注意が必要です。
ここでは、PCを前提した videoタグ を貼りつます。

googleドライブからダイレクトリンクURLを取得するサイト(Google Drive Direct Link Generator) を使い、共有URLから動画ファイルの共有URLを取得します。

sites.google.com

HTML code

<video controls autoplay width="500">
<source src="https://drive.google.com/uc?export=download&id=<ここのコードが動画によって違います>" >
</video>

　..とこんな感じで、Google Driveにアップした動画をyoutubeのコントローラーを使ったパターンとvideoタグを使ったパターンの2種類を紹介しました。

いろいろな使い方ができると思いますので
楽しいブログ記事を作ってくださいね (^o^)v

クロームキャスト グーグル 第2世代 Google Chromecast ワイヤレスHDMI ミラーリング Wi-Fi WiFi(Android iPhone iPad Mac Windows Chromebook 対応) YouTube NETFLIX hulu dTV GYAO などを楽しめます【正規品】

GA00157-JP Google Wi-Fi 1台

Google Wifi AC1200 Dual-Band Wi-Fi Router NLS-1304-25 デュアルバンドワイヤレスルーター [並行輸入品]

Google - Pixel 3 (2018) Unlocked sim free (64GB, Just Black)

はいふりの最終回で、晴風が沈んでいくシーンは泣けましたね (=^･^=)

ハイスクール・フリート 1(完全生産限定版) [Blu-ray]

ハイスクール・フリート 晴風アポロキャップ