FC2 ブログに動画を載せるには(平成29年 8月 6日版)

  • トゥィッターで言及(トゥィート)
  • アメーバで共有
  • はてなブックマークに登録
  • フェイスブックで共有
  • タンブラーで共有
  • グーグルプラスで共有
  • 平成28年12月20日公開記事を一部修正しております。

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 属性は適切な値になるようにします。


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


サーヴァの要件 (平成29年 8月 6日 更新)

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

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

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

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

また、可能であれば、以下の要件を満たしている事が望ましいでしょう:

TLS (SSL・HTTPS)に対応している事

平成29年 8月 6日現在は実現していませんが、FC2 ブログは TLS 対応を計画しております。

FC2 ブログが TLS に対応した場合、動画も TLS で配信しないとブラウザのアドレスバーなどに警告が表示されてしまいます。

正しい証明書を用いた TLS であれば何でも良く、それこそ共有 TLS でも一向に構いません。

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

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

勿論、これらのサーヴァでは追加料金不要で共有 TLS も利用出来ます。


動画の要件

また、埋込む動画については、以下の条件を満たした 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:// から記述します。

動画を TLS (SSL・HTTPS)で配信する場合は、URL を https:// としますが、TLS でなくても配信が可能になっているのなら https:// の代わりに // で始まる URL にしても良いでしょう。

主にフィーチャフォン向けの代替コンテンツ

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

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


例:拙作『平成29年暑中見舞い動画』

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

拙作『平成29年暑中見舞い動画』です。

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

<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>
関連記事
スポンサーサイト