FC2 ブログに動画を載せるには(平成28年12月20日版)

  • トゥィッターで言及(トゥィート)
  • アメーバで共有
  • はてなブックマークに登録
  • フェイスブックで共有
  • タンブラーで共有
  • Google+

アメブロでも同様の記事を書いたので、FC2 ブログについても書いてみたいと思います。

FC2 では独自の動画サーヴィスをやっておりますが、それとは無関係な動画埋込についてです。

  • 【注意】

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

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

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

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

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

ユーテューブ, ニコニコ動画または FC2 動画 に動画をアップロードする

ユーテューブもニコニコ動画も FC2 動画 も無償で利用出来ます。

普段使っているサーヴィスを利用するのであれば、これらが便利でしょう。

尚、同様のサーヴィスは他社でもやっておりますが、これら三つのサーヴィスは PC 向けエディタで簡単に埋込めるのが特徴です。

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

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

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


ユーテューブ, ニコニコ動画または FC2 動画を使う場合

PC 向けのエディタには、ユーテューブ, ニコニコ動画及び FC2 動画を埋込むためのボタンが付いております。

これを利用する事で簡単に動画を埋込めます。


高度な埋込

HTML タグを直接入力出来る方なら、動画が埋込めない環境(特にフィーチャフォン)に代替の静止画などを見られるようにする事も出来ます。


ユーテューブの場合
  • ニコニコ動画や FC2 動画についてはここでは割愛します。

ユーテューブの場合、共有用の HTML タグをコピーする事で様々なカスタマイズが出来ます。

但し、FC2 はグーグル(ユーテューブの親会社である検索サーヴィス)に嫌われているらしく、ユーテューブでは FC2 用の共有タグは提供していません。

そこで、汎用の埋込コードをを取得します。

  1. 先ず当該動画のユーテューブでの公開ページを開き、表示される動画の下に出ている共有をクリックします。
  2. そうしたら下に出てきた 埋め込みコード をクリックします。
  3. そうすると、汎用の埋込コードが出て来るので、それをコピーしてください。

動画非対応環境向けの代替コンテンツは、末尾の</iframe>タグの直前に入れます。

  • このタグの直前で改行しても問題ありません。
  • 特にフィーチャフォンに対しては、取得した<iframe>タグと</iframe>タグは完全に無視されます。
<iframe width="***" height="***" src="https://www.youtube-nocookie.com/embed/*********" frameborder="0" allowfullscreen>ここにフィーチャフォン向けの代わりになるコンテンツを入れます</iframe>

自分で打込む場合

勿論、上記の HTML を手で入力する事も出来ます。

この場合、src 属性の値となる URL については、********* の部分は、埋込ページの URL https://www.youtube.com/watch?v=********* での、********* の部分にある英数字等の列を入れて下さい。

  • 稀に ********* の部分に & が含まれる場合がありますが、その場合は一番初めに出てきた & の直前までを入れて下さい。

また、width 属性と height 属性は適切な値になるようにします。


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


サーヴァの要件

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

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

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

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

FC2 ウェブなどの無償サーヴァだと倉庫利用が禁止されている場合が多いので、有償のものを撰ぶと良いでしょう。

FC2 レンタルサーバー Lite, さくらインターネットやロリポップ!などの格安サーヴァでも勿論構いません。


動画の要件

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

映像

H.264 コーデック

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

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

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


FC2 ブログで注意する事

FC2 では様々なテンプレートを使用する事が出来ます。

ただ、HTML 5 でない PC 向けテンプレートでは、インターネットエクスプローラ 9 以降で閲覧した際に動画が埋込まれません。

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

    • とは言え、IE 8.0 までの利用者は今日では激減しており、代替策を執れば良いでしょう。

このため、ここでは最も簡便に、特にテンプレートを問わない方法を解説する事とします。

  • この方法は、当出張所では採用しておりません。当出張所ではほんの少しですが高度な方法で動画を埋込んでおります。

実際に打込むタグ

最新エディタの場合は、HTML表示 に切替えます。

  • 従来からのエディタの場合も含めて、改行の扱いHTMLタグのみ にしておくと良いでしょう。

その上で、以下のタグを入力します:

  • 間違え易い箇所もあるので、以下をコピー・ペーストして【】で書かれた箇所を適宜直して使うと良いでしょう。
<video width="【横解像度】" height="【縦解像度】" poster="【動画再生開始まで表示しておく画像へのURL】" src="【動画へのURL】" preload="none" controls="controls">
<!--[if IE]>
    <object width="【横解像度】" height="【縦解像度】" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<![endif]-->
<!--[if !IE]><-->
    <object width="【横解像度】" height="【縦解像度】" type="video/mp4" data="【動画へのURL】">
<!-- ><![endif]-->
        <param name="autostart" value="false" />
        <param name="autoplay" value="false" />
        <param name="controller" value="true" />
        <param name="src" value="【動画へのURL】" />
        <param name="URL" value="【動画へのURL】" />
        【主にフィーチャフォン向けの代替コンテンツ】
        </object>
    </video>

記述すべきもの

上記の HTMLで、【】で囲んだ部分については、以下の内容に書換えなければなりません。

  • 同じものを数箇所に書かなければならないものもあります。
横解像度
縦解像度
それぞれピクセル数(整数)で指定します。
動画再生開始まで表示しておく画像

動画内の一コマなどを GIF, JPEG などの形式にしたものを用います。

  • 当然静止画ですので、FC2 ブログの画像アップロードを使う事も出来ます。
  • アニメーテッド GIF 画像を使う事も出来ます。
  • 動画の解像度と合わない場合は、適宜拡大縮小されます。
動画へのURL
MPEG 4 動画への URL を http:// または https:// から記述します。
主にフィーチャフォン向けの代替コンテンツ

動画が見られないフィーチャフォンに対しての代替 HTML です。

静止画(<img>要素)や動画の内容を書いたテキストなどを入れておくと良いでしょう。


例:拙作『平成28年クリスマス動画』

このウェブログでは普段は上記のような複雑な記述はしてりませんが、ここでは実際に上記の方法で埋め込んでみました。

拙作『平成28年クリスマス動画』です。

ここでは、以下のようなコードを書いております:

<video width="480" height="392" poster="https://www.marguerite.jp/(略)" src="https://www.marguerite.jp/cgi/video/(略)" preload="none" controls="controls">
<!--[if IE]>
    <object width="480" height="392" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<![endif]-->
<!--[if !IE]><-->
    <object width="480" height="392" type="video/mp4" data="https://www.marguerite.jp/cgi/video/(略)">
<!-- ><![endif]-->
        <param name="autostart" value="false" />
        <param name="autoplay" value="false" />
        <param name="controller" value="true" />
        <param name="src" value="http://www.marguerite.jp/cgi/video/(略)" />
        <param name="URL" value="http://www.marguerite.jp/cgi/video/(略)" />

        <!-- 主にフィーチャフォン向けの代替コンテンツ -->
        <img alt="" src="(略)" width="704" height="576" />
        <ul><li><a href="(略)">動画を見る</a></li></ul>
        </object>
    </video>
関連記事
ページ先頭