2014年6月30日 (月)

記事内に動画を挿入するための2通りの方法

ブログ記事内に画像を挿入するのは比較的簡単ですが、動画挿入は多少作業量が増えます。



一度覚えてしまえば、作業そのものはカンタンなので大丈夫。



今回は、「手元にある動画ファイルをアップする」場合と、「youtubeに予めアップされている動画をアップする」場合の、二通りの方法をご紹介します。



How_to_upload_movies

記事やウェブページに動画を挿入するには、以下の手順で操作します。





手元にある動画ファイルをアップする

  1. 記事作成画面の [ファイルを挿入] ボタンをクリックする

    Movie1



  2. [ファイルを選択] ボタンでアップロードする動画ファイルを指定して、[ファイルをアップロード] ボタンをクリックする

    Movie2




    この状態で公開した場合は、以下のように記事内に動画ファイルのダウンロードリンクが表示されます。

    Movie3

    Movie42



    引き続き、<embed> タグを挿入します。




  3. 記事作成画面の [HTMLの編集] にチェックを入れる

    Movie5



  4. 表示される HTML コード を、以下の形式から
    <a href="http://***.lekumo.biz/weblog/files/video.mov">
    video.movをダウンロード</a>

    以下の形式となるよう編集する



    <embed src="http://***.lekumo.biz/weblog/files/video.mov" 
    height="xxx" width="xxx" autostart="0"></embed>

    ※ コードを編集する際は、次の点にご注意ください。
    • 動画の height と width の指定(height="xxx" width="xxx" の「xxx」部分をピクセルで指定)を忘れずに行ってください。(例:横320 × 縦230)
    • 動画を中央に表示させたいときは、以下のように記述します。
      <p style="text-align: center">
      <embed src="http://***.lekumo.biz/weblog/files/video.mov" height="xxx"
      width="xxx" autostart="0"></embed></p>








YouTube など動画共有サイトの動画を挿入する場合は、以下の手順で行います。



【YouTube 動画を挿入する】

  1. 記事作成画面で [YouTube] ボタンをクリックする

    Movie7



  2. 挿入したい動画をキーワードで検索する

    Movie8



  3. 目的の動画を選択し、[動画を挿入] ボタンをクリックする

    Movie9




    記事作成画面では以下のように表示されます。


  4. Movie10



  5. 事前に動画の内容を確認する場合は「動画をプレビュー] をクリックする

    Movie11



  6. 動画右上に表示される [挿入] をクリックする

    Movie12



上記手順で、記事内に動画が挿入されます。




ブログ上では、以下のような表示となります。


Movie13