こんにちは。
本日のネタは前からやってみたかったけどどうやるのかなーって思ってたこと。動画をwebページに埋め込む方法です。
※カテゴリーをプログラミングとしていますが内容はHTMLのみです。
※初心者がやってみた、というだけの内容で単純な１方法です。
はてなブログだと編集画面の右側にある「+」のボタンからyoutube動画を簡単に貼り付けることができますが、画像のように直接アップロードっていうのはできないですね。
じゃあブログに自前の動画を貼り付けたかったら必ずyoutubeに投稿しなけらばならないのか？ってことになります。
別にそれでも大きな問題はありませんが動画投稿サイトにアップすると視聴者にはそれが１コンテンツとしてみなされるわけじゃないですか。
ちがうんですよ、記事の一部にしたいのであって動画を完成された１つのコンテンツとして見て欲しくないときがあるんですよ。今までGIF画像でやっていたようなちょっとしたものとか、記事の補足的なものとか。
言いたいことわかります？ わかりますよね(圧)。
それでは続けます(`･ω･´)
直接動画がアップロードできないとなるとまずは動画を置いておくサーバーが要るってことはなんとなく想像がつきました。
そこで利用するのはGitHubというホスティングサービス。以前にJavaScriptを置いてブログのページで実行するっていう試みをしたやつです。
どうやら動画もアップロードできる模様。.movと.mp4形式に対応しているのだとか。
参考にしたサイト↓
ファイルサイズの上限が10MBまでらしいので結構短めになりますね(無料版)。
動画のアップロードは Issue/Pull Request/Discussion という項目でできるようですがIssueでやってみました。
ホーム画面からレポジトリを選択、または作成して選択します。
(アカウントやレポジトリ作成方法は上に貼った過去記事をご参照ください。)
次にIssuesを選択し、New Issue ボタンをクリック。
ブログの編集画面みたいなのが出てきます。
適当にタイトルを入れて下にある「Paste, drop, or click to add item」をクリックするかドラッグして動画をアップロードします。
アップロードすると中間の記事欄(？)にメディアのURLが表示されるのでコピーしておき右下のSubmit new Issue ボタンで投稿。
GitHub側はここまで。あとはブログやwebページに今コピーしたURLを参照するHTMLコードを組み込むだけ。
もっともシンプルな書き方は
<video src="動画のURL"></video>
となりますが、自動再生にするなどいろいろな種類があるみたいです。
参考にしたサイト↓
コントロールパネルつきのやつを「キー入力キング」の宣伝動画でやってみた↓
うまくいきました。ちなみにHTMLコードはこうなってます↓
<video src="https://github.com/icedtomatobazooka/icedtomatobazooka.github.io/assets/102132871/d72fba3d-5cfa-4a6e-bcef-3e8529484e37" controls="controls" width="100%" height="100%"></video>
専用ページにもサイズを50%にして貼っておこう(・∀・)
ありがとうございました。
