サイトに保存しておいた動画をアップする方法について解説をしてみます。
動画をサーバーにアップロード
まず保存してある動画をサーバーにアップロードします。
FTPソフト(ここではFileZilla)を立ち上げて接続をします。
詳細については以下の記事をご覧ください。
立ち上げたFileZillaのローカルサイトからパソコンに保存している動画ファイルを
ドラッグアンドドロップでpublic_htmlにコピーします。
コピーしたづァイルはリモートサイトの下の部分に保存されます。
HTMLで動画を埋め込む
動画を埋め込むのに最も簡単なのは<ifarme>タグを用いることです。
ユーチューブにアップされている動画の梅込み。
YouTubeはこれで動画埋め込みのコードを作っています。
ジョーン・バエズが振られたボブ・ディランに対する失恋を曲にしたものだと言われている「Diamonds and Rust」。
今聴いても心が震えます。
私はこの曲を作ったジョーン・バエズよりもジョディコリンズの歌のほうが好きなんですが。
二人で歌っている動画がYouTubeにあったので貼り付けてみました。
もう70歳過ぎてるんですけどね。
私が最初に聴いたときにはすでに懐メロになっていましたから当然か。
これをこの記事に貼り付けるのは実に簡単で。
動画の下にある「共有をクリック」
クリックして出てきた画面のURLをコピーか。
「埋め込み」をクリック。
大きさなどを変えられるのでわたしは埋め込みを使います。
URLを記事に貼り付ければ動画を貼り付けたことになります。
「埋め込み」を、クリックすると次のような画面が出てきますので
コードをコピー。
記事に貼り付けます。
<iframe>を使うと、動画の大きさから、URLまで設定できます。
先程の埋め込みコードには確かに大きさやURLが書き込まれています。
大きさは数値を変えれば変更することが出来ます。
保存している動画の埋め込み
保存された動画と言ってもPCに保存しただけではだめでサーバーにアップしておかなくてはなりません。
初心者だと初歩的なことでもつまずいてしまうこともあるかと思い(自分のことですが^^;)、再確認の意味で書いておきます。
<ifarme>タグで動画を貼り付け
これで動画を貼り付けるやり方についてまずは書いてみます。
以下のように記述すると
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>アトム</title> </head> <body> <iframe width="560" height="315" src="Atoms - 13232.mp4" frameborder="0" allowfullscreen></iframe> </body> </html>
HTMLの基本の説明を簡単にしておきます。
HTMLは入れ子構造(ネスト)にっていて。大きなものの中に小さなものを次々に入れることができるようになっています。
そして<html>という親要素の中に<head>や<body>といった子要素が記述されるというルールがあります。
<html>~</html>はhtmlで記述されている範囲を表し。
その中にある子構造<head></head>はページのヘッダー情報の範囲を示します。
<head></head>の中に書かれている<meta charset=“UTF-8”>というのは
メタ情報(あるデータが付随して持つそのデータ自身についての付加的なデータ)を示しています。
ここでは、このファイルの文字コードが UFT-8 であるということです。
<head></head>の子要素<title></title>は指定したファイルのタイトルを示します。ブラウザ上ではタブの部分に表示されます
<body></body>はラウザに表示サれる内容が書かれている範囲を指定します。
ここでは動画が指定されていまして。
<iframe></iframe>(アイフレーム)タグはH特定のファイルをページの一部に表示させるもので。
HTML内に別のHTMLを入れ子にします。の文書の中に、もうひとつ別のHTMLファイルを組み込みます。
ただこのような記述方法は別のページを表示する仕組みですので
それぞれの閲覧コンテキストは完全な文書環境であるため、ページの中で
<iframe>
を使用するごとに、必要となるメモリやその他の計算リソースが増加します。
ということで今後廃止の方向にあるということです。
ただ簡単に表示できますので。便利は便利です。
<iframe></iframe>の中の小要素。
widthは幅の指定
heightは高さの指定
srcは画像や文書など、表示させるファイルの出処を指定します。
ここではサーバー内に保存してある動画のフィル「Atoms – 13232.mp4」を入れました。
frameborderは数値をゼロにするとフレームの境界線を消す事ができます。
allowfullscreenは全面表示ができるようにするもの。
<video>タグで動画の貼り付け
<iframe>タグはシンプルで使いやすいんですが、今後は廃止の方向に行くということで。
代わりに出てきたのが<video>タグです。
なのでYouTubeなどがまだ<iframe>タグを使っていますのでまとめてみましたが。
実際の埋め込みは<video>タグを使って行います。
これが非常にシンプルで。動画をそのまま表示するのであれば。
<video src=”.Atoms – 13232.mp4″></video>
で済みます。
実際にコードを書いてみます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ATOM</title> </head> <body> <video controls autoplay loop><source src="動画/Atoms - 13232.mp4"></video> </body> </html>
controls属性でインターフェースを表示します。
autoplay属性を指定すると、ウェブページを読み込んだ時点で、動画が自動再生されます。
loop属性を指定すると繰り返し再生されます。
それを入れて実際にコードを書くと以下のように動画が表示されます。
タグのcontrols属性を指定すると、再生・一時停止・再生位置の移動・ボリュームなど、 動画を利用しやすくするインターフェースを、ブラウザが自動で表示してくれます。
もし大きさを指定したい場合は
<video controls autoplay loop width="320" height="240">
として大きさを追加して指定することが出来ます。
HTMLで画像の埋め込み
画像の貼り付けタグはimgです。GIF・JPEG・PNGの三種類が使えます。
このimgタグは単独で使われます。範囲や他の属性は付きません。
src属性で指定した画像を表示します。
alt属性 (alternate attribute)というのは
目の不自由な方のための読み上げ機能で何の画像なのかを読み上げます。
Googleなどの検索エンジンもこの属性で何の画像か判断しますので書いておいたほうが良いと思います。
title属性は画像やリンク先のタイトルを表示します。
画像にマウスを当ててしばらくおいておくとタイトルが表示されます。
全体のコードは以下です。
<!DOCTYPE html> <html lang=ja"> <head> <meta charset="utf-8" > <title>ボディビルダー</title> </head> <body> <img src="画像/筋肉.png" alt="ボディビルダー"title="ボディビルダー"> </body> </html>
画像の指定ですが。
サーバーの
画像をフォルダなど別の場所に移した場合
画像をサーバーのフォルダに移したりした場合。
記事中の画像が消えてしまいます。
その場合は画像のファイルを入れるときに
フォルダ名/ファイル名を書き込むと表示されるようになります。
まとめ
パソコンに保存してある画像や動画をHTMLを使って記事に埋め込む方法をまとめてみました。
特に動画の埋め込みは使えるようになると自分で作成した解説動画や実況動画などを貼り付けられますので
やり方をマスターしておくと便利です。
この記事へのコメントはありません。