2016年12月13日 18時08分55秒

アメブロに動画を載せるには(平成28年12月13日版)

テーマ:アメブロいじり

アメブロの記事に動画を載せる方法です。

前にも何度か書いておりますが、今回は考えられる全ての方法を掲載します。

  • 【注意】

    • 他者が作成した動画の無断転載は著作権侵害となりますのでやめましょう。
    • 自分で作成した動画であっても、素材の著作権などには充分注意しましょう。

初めに:動画を何処に置くか

先ず、載せたい動画を何処に置くかです。

アメブロでは静止画をアップロードする事は可能ですが、動画はアップロード出来ません。

そこで、以下のいずれかを採ればよいでしょう:

ユーテューブに動画をアップロードする

ユーテューブは無償で利用出来ます。

アメブロも PC 向けの最新エディタではより手軽な方法で貼り付けられるようになっております。

自分でサーヴァを借りてそこに設置する

手間暇とお金が掛かりますが、より柔軟に運用する事が出来ます。

但し、サーヴァには制限があるので、それを遵守しなければなりません。

また、HTML を直接打込むので、その知識も必要になるでしょう。

尚、ニコニコ動画の動画を埋込む事は出来なくなったようです。

  • ニコニコ動画は、TLS (SSL・HTTPS)を採用していないため、一部機能が使えなくなってしまうからと思われます。

ユーテューブを使う場合

ユーテューブに掲載したい動画が公開されていれば、PC 向けの最新エディタなら検索して出てきた動画を指定するだけです。

自分で作った動画を公開したい場合は、グーグルのアカウントを取ってそれからユーテューブのアカウントを取得します。

一度アカウントが取れれば、あとはそのアカウントから動画をアップロードすれば良い事となります。


最新エディタでの貼付けが出来ない場合

最新エディタでは検索機能を持っておりますが、アップロードして間もない動画は検索されない場合もあります。


当該動画公開ページから埋込む方法

このような場合は、

  1. 先ず当該動画のユーテューブでの公開ページを開き、表示される動画の下に出ている共有をクリックします。
  2. トゥイッターなど幾つものサーヴィスのアイコンが並ぶので、

      1. その中からアメブロアイコン(緑色のアイコン)をクリックします。
      2. すると、アメブロの旧型エディタが開いて必要なコードが HTML で入力されますので、前後に必要な本文を打込む等して投稿します。
    • または、これらのアイコンの上にある 埋め込みコード をクリックすると、その下に汎用の HTML 切片が出て来ますので、これをコピーして普段使っているエディタに貼付る事も出来ます。

いずれの場合も、アメブロに投稿する際にはエディタを HTML モードにして下さい。


HTML を直接打込む方法

HTML が分かる方は、直接入力する手もあります。

<iframe width="459" height="344" src="https://www.youtube.com/embed/【動画ID】" frameborder="0" allowfullscreen></iframe>

動画ID は、公開ページの URL で言えば、https://www.youtube.com/watch?v=******* の ******* の部分(英数字等の列)となります。

  • 途中に & が含まれている場合がありますが、その場合は &手前までが動画ID となります。

自分でサーヴァを用意する場合


サーヴァの要件

アメブロの記事に自分で用意したサーヴァから配信される動画を埋込む場合、サーヴァには以下の要件が必要です。

"倉庫利用"を認めている事

他サイトからの埋込みを禁止していない事が重要です。

禁止されている場合、埋込みに失敗したり後になってアカウントを剥奪される恐れもあります。

TLS (SSL・HTTPS)が使える事

アメブロは、スマートフォン向けの高速表示技術 AMP に対応しております。

AMP でも動画の埋込みは可能ですが、埋込む動画は TLS (SSL・HTTPS) で配信される動画である事が必要です。

さくらインターネットやロリポップ!などの格安サーヴァにも共通 TLS が使えるプランがある所も多いので、そのようなプランで契約すれば追加料金無しで TLS が使えます。


動画の要件

また、埋込む動画については、以下の条件を満たした MPEG 4 動画である必要があります。

映像

H.264 コーデック

  • プロファイルはベースライン。
  • レヴェルは 1.3以下。
音声
AAC コーデック

今日ではもっと上位のプロファイルやレヴェルも使える筈ですが、最も旧いスマートフォンだと上記の制限があります。

尚、他の形式(Ogg 動画や WebM など)はマッキントッシュや iOS 端末等で埋込めないため、使ってはいけません


アメブロで注意する事

ベーシックテーマなど、HTML 5 の文書型を採用していないテーマでは、インターネットエクスプローラで閲覧した際に動画が埋込まれません

  • IE 8.0 まででは HTML 5 の文書型であっても<video>要素では埋込めません。

このため、非対応環境に対しては代替となる静止画を代わりに表示して、動画へのリンクを貼ると良いでしょう。


実際に打込むタグ

お使いのエディタを HTML 入力モードにして、以下のタグを入力します:

<video width="【横解像度】" height="【縦解像度】" poster="【動画再生開始まで表示しておく画像へのURL】" src="【動画へのURL】" preload="none" controls="controls">
【非対応環境への代替コンテンツ】
</video>

尚、<video>要素タグは平成28年12月13日現在禁止タグには指定されておりません


記述すべきもの
  • 横解像度縦解像度はそれぞれピクセル数(整数)で指定します。
  • 動画再生開始まで表示しておく画像は、動画内の一コマなどを GIF, JPEG などの形式にしたものを用います。

    • 当然静止画ですので、アメブロのアップロードを使う事も出来ます。
    • アニメーテッド GIF 画像を使う事も出来ます。
    • 動画の解像度と合わない場合は、適宜拡大縮小されます。
  • 動画へのURLは、https:// で始まる URL とする必要があります。
  • 非対応環境への代替コンテンツは、

    • 一部テーマでのインターネットエクスプローラ
    • フィーチャフォン

    など向けの代替コンテンツを与えます。

代替コンテンツの例

以下のように動画の一コマの静止画と動画へのリンクを与えておくと良いでしょう:

<img width="【横解像度】" height="【縦解像度】" src="【静止画へのURL】" alt="" />
<ul><li><a href="【動画へのURL】">動画を見る(PC のみ)</a></li></ul>
  • 動画をフィーチャフォンでも見られるようにするのは大変難しいので、ここでは PC でのみ見られる動画を仮定しております。

例:拙作クリスマス動画

例として、拙作の平成28年クリスマス動画・堀北真希うさぎとうさ耳中学生姉妹のホワイトクリスマスを挙げておきます:

この動画は、以下のコードで埋込んております:

<video width="480" height="392" poster="https://www.marguerite.jp/Illustrations/Greetings/%E5%B9%B3%E6%88%9028%E5%B9%B4%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9E%E3%82%B9%E3%82%AB%E3%83%BC%E3%83%89/%E6%9C%AC%E7%AF%87%E3%83%BB%E5%A0%80%E5%8C%97%E7%9C%9F%E5%B8%8C%E3%81%86%E3%81%95%E3%81%8E%E3%81%A8%E3%81%86%E3%81%95%E8%80%B3%E4%B8%AD%E5%AD%A6%E7%94%9F%E5%A7%89%E5%A6%B9%E3%81%AE%E3%83%9B%E3%83%AF%E3%82%A4%E3%83%88%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9E%E3%82%B9.Poster.GIF" src="https://www.marguerite.jp/cgi/video/s.cgi?mode=mobile&amp;n=%E5%B9%B3%E6%88%9028%E5%B9%B4%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9E%E3%82%B9/%E6%9C%AC%E7%AF%87%E5%8B%95%E7%94%BB%E3%83%BB%E5%A0%80%E5%8C%97%E7%9C%9F%E5%B8%8C%E3%81%86%E3%81%95%E3%81%8E%E3%81%A8%E3%81%86%E3%81%95%E8%80%B3%E4%B8%AD%E5%AD%A6%E7%94%9F%E5%A7%89%E5%A6%B9%E3%81%AE%E3%83%9B%E3%83%AF%E3%82%A4%E3%83%88%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9E%E3%82%B9" preload="none" controls="controls">
<img alt="" src="http://stat.ameba.jp/user_images/20161209/22/marguerite-site/3c/82/g/o0704057613817679112.gif" height="576" width="704" />
<ul><li><a href="http://www.marguerite.jp/cgi/video/s.cgi?mode=html&amp;n=%E5%B9%B3%E6%88%9028%E5%B9%B4%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9E%E3%82%B9/%E6%9C%AC%E7%AF%87%E5%8B%95%E7%94%BB%E3%83%BB%E5%A0%80%E5%8C%97%E7%9C%9F%E5%B8%8C%E3%81%86%E3%81%95%E3%81%8E%E3%81%A8%E3%81%86%E3%81%95%E8%80%B3%E4%B8%AD%E5%AD%A6%E7%94%9F%E5%A7%89%E5%A6%B9%E3%81%AE%E3%83%9B%E3%83%AF%E3%82%A4%E3%83%88%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9E%E3%82%B9#CLIP2">動画を見る</a></li></ul>
</video>
AD

AD

Ameba人気のブログ

Amebaトピックス

      ランキング

      • 総合
      • 新登場
      • 急上昇
      • トレンド

      ブログをはじめる

      たくさんの芸能人・有名人が
      書いているAmebaブログを
      無料で簡単にはじめることができます。

      公式トップブロガーへ応募

      多くの方にご紹介したいブログを
      執筆する方を「公式トップブロガー」
      として認定しております。

      芸能人・有名人ブログを開設

      Amebaブログでは、芸能人・有名人ブログを
      ご希望される著名人の方/事務所様を
      随時募集しております。