HTML

HTMLで動画や画像を埋め込みする方法を詳説

Sponsored Link

Sponsored Link

サイトに保存しておいた動画をアップする方法について解説をしてみます。

動画をサーバーにアップロード

まず保存してある動画をサーバーにアップロードします。

FTPソフト(ここではFileZilla)を立ち上げて接続をします。
詳細については以下の記事をご覧ください。

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を使って記事に埋め込む方法をまとめてみました。

特に動画の埋め込みは使えるようになると自分で作成した解説動画や実況動画などを貼り付けられますので
やり方をマスターしておくと便利です。

 

 

Sponsored Link

Sponsored Link

関連記事

  1. HTML・CSSを実際に記事を作りながら覚えていこう
  2. テキストエディタATOM インストールから基本編集・操作を詳説(…
  3. HTMLとCSS 初歩的な文字装飾 基本まとめ
  4. HTMLの勉強で押さえておくべきこと②HTMLリンクタグ基本
  5. CSS 擬似要素beforeとafter 使い方基本
  6. HTMLの勉強で押さえておくべきこと①Markup Langua…
  7. CSS WEBアイコンフォントの使い方 Font Awesome…
  8. 知っておくと便利なセレクタまとめ

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. Windows10 でフォルダの拡張子を表示するには?
  2. WordPressのフォルダ構成とバックアップの仕方
  3. WordPressエディタ「Gutenberg」の使い方 総まとめ
  4. 【Basics of site construction】カテゴリーを設定はSEO対策に最重要 読者にもわかりやすい整理整頓方法とは
  5. 独自ドメインのメールアドレスとメールソフトの設定について!Windows10やGmailでで簡単に送受信する方法や
  6. サーバって何?どのレンタルサーバーを選べばよいのか?
  7. エックスサーバーでSSL化設定をするやり方を詳細に解説してみた
  8. HTMLで動画や画像を埋め込みする方法を詳説

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

HTML ul ol liタグで作る箇条書きリスト 使い方の基本

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

表(table)の作り方表を作るには。テーブルタグを使います。&lt;TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

ウエブマーケティング入門酒場 
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

人気の投稿とページ

MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
Windows10でブルーライトカットの設定 コントロールパネルの使い方
HTMLで動画や画像を埋め込みする方法を詳説
AviUtlでGIF形式で動画を保存することができる出力プラグイン Direct GIF Export 2
AviUtlのすべてのエフェクトについての解説③クリッピング・斜めクリッピング・マスク
AviUtl 便利で楽しい カスタムオブジェクトの使い方
AviUtil カメラ制御の基本の基本を詳しく解説
AviUtlのすべてのエフェクトについての解説⑤透過・透明化エフェクト クロマキー・カラーキー・ルミナンスキー
AviUtl タイムラインの空いているところを右クリックして出てくるメニュー詳説

ソフト・アプリの使い方

PAGE TOP