スマホなどで撮影した動画をブログやホームページで再生できるようにするには

スマホなどで撮影した動画をブログやホームページで再生できるようにするには

このサイトでもどんどん増やしている猫ちゃんたちの動画。まあ分かる人には分かると思うのですが、これは全て私のYoutubeアカウントにアップした動画を共有しているだけなんですね。

ブログだと難しいかもしれませんが、わざわざYoutubeを経由しなくても通常のホームページやこのサイトでも使っているWordpressなどの構築ツールを使うと簡単に動画をアップロードして再生できるようにはなるのですが・・・動画は容量が大きいのですぐにアップロードできる容量いっぱいになってしまいますし、データが大きすぎて再生できない場合もあります。

動画のデータはとても巨大

ちょっと難しい話ですが、動画は普通の写真に比べて非常に容量が大きいファイルになります。例えばフルHDの動画だと1秒あたり29枚前後の写真を連続して再生することで1秒の動画となるので、1枚の写真が1メガバイトだとすると、1秒の動画で29メガバイト、10秒の動画で290メガバイト・・・と非常に大容量になってしまいます。もちろんビデオフォーマット(形式)を変更して圧縮という作業をすれば小さくはなりますが、変換したりするのは面倒ですね。

スマホ動画をホームページなどで再生できるようにするのは面倒

さらにスマホで撮影したファイルは「3gp」という形式で保存されるものが多いため、ほとんどのツールではそのままホームページ上で再生することができないので、一旦パソコンなどで適応する形式に変換してからサーバーにアップロードして・・・うーーーん面倒だ!!とさじを投げる結果に・・・。

が全部解消されるのが、Youtubeに動画を保存して、再生画面だけを表示するというこのサイトで使っている方法なのです。今回は猫ちゃん情報からちょっと脱線?してYoutubeに動画を保存して、再生画面だけを表示する方法を紹介します。自身でブログやホームページを持っている方はぜひやってみてくださいね。

Youtubeに動画を保存して、再生画面だけを表示する方法

Youtubeの準備

準備といっても難しい作業はありません。ただ単純にYoutubeのサイトに行ってメンバー登録するだけです。短い動画を投稿するだけなら必要な入力項目も少ないですから個人の特定がされたりという心配もありません。

動画を撮影する

いつも通り、スマホで動画を撮影します。撮影した動画はそのままYoutubeにアップロードして、後から編集(いらない部分をカットしたり、逆向きに撮影されたものを回転させたり)できますから、気にせずどんどん撮影しましょう。

動画をYoutubeにアップロードする

スマホから直接アップロードする場合は

  1. 「Youtube」アプリを起動する
  2. 「Youtube」アカウントにログインする(最初の1回だけ)
  3. 画面右側に赤い○の中に上矢印のマーク(アップロードマーク)が出るのでファイルを選択してアップロード
  4. 完了まで待つ
  5. 公開

で完了です。編集する場合にはパソコンでやったほうがいいと思います。

パソコンでアップロードする場合は

[contentcards url=”https://www.momosiri.info/airdroid/”]

で紹介している「Airdroid」というアプリを使ってスマホからパソコンへ動画を転送すると簡単です。その他の手順は基本的にスマホと同じ流れです。使うのが「アプリ」ではなく「インターネットエクスプローラー」などのインターネット閲覧ソフトを使うということ位です。

共有コードを取得してブログやホームページに貼りつける

  1. パソコンで動画を公開するとその画面上に「共有」というタブが、スマホから公開したときには一旦パソコンからYoutubeを開いて挿入したい動画を再生すると再生画面の下に「共有」というのが表示されますのでクリックします。
  2. 「埋め込みコード」をクリックします
  3. 表示されているコードをブログの投稿やページに貼りつけます

・・・そしてブログ記事などを実際に開いてみると・・・Youtubeの再生画面(↓みたいな)が登場!!これで動画が載せられます。

ちなみにこの動画の埋め込みコードは
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/Mj1vdTz-H88″ frameborder=”0″ allowfullscreen></iframe>
ですから、これを貼りつければいいということです。

ただ、このままだと左に寄ってしまって格好悪いので・・・
全体を真ん中にそろえるタグを使います。赤い部分を埋め込みコードに追加するんですね。
<div align=”center”><iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/Mj1vdTz-H88″ frameborder=”0″ allowfullscreen></iframe><div>
すると・・・

というふうに真ん中に動画の再生画面が表示されるようになります。

※表示方法変更により上下とも拡大表示されています

動画が入ると結構格好いいサイトやブログになりますから動画を撮る機会のある方はぜひやってみてくださいね。

ちなみに自分が撮影した動画でなくてもこの方法で動画の再生画面(正確にはリンクの埋め込みと言いますが)を表示するだけなら違法にはなりません。見つけた動画はこの方法でリンクしましょう。ただし、他人の作った動画は知らず知らずのうちに削除されてしまうことがあり、目を光らせていないと「この動画は削除されました」という残念な表示になりますし、著作権のある動画(テレビドラマや映画など)の場合は非常にグレーな領域になりますからできれば避けた方がいいと思います。

動画の違法性についてはこちらを参考にしてくださいね。

以上ちょっと長くなりましたが、「スマホなどで撮影した動画をブログやホームページで再生できるようにするには」でした