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. CSS最低の書き方の基本 CSSはどこにあるの?
  2. CSS レスポンシブデザインに欠かせないmax-widthとmi…
  3. ソースコードを記事中に表示させるために必要なことは?簡単にソース…
  4. CSS 擬似要素beforeとafter 使い方基本
  5. HTMLの学習の前に環境を整える(Windows版)エディタとブ…
  6. CSS 幅と高さの指定方法 widthとheightプロパティ基…
  7. HTMLの勉強で押さえておくべきこと②HTMLリンクタグ基本
  8. HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

コメント

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

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

サイト構築関連

  1. WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 
  2. ソースコードを記事中に表示させるために必要なことは?簡単にソースコード変換ができるサイトやプラグインEnlighter – Customizable Syntax Highlighterも紹介
  3. HTMLで動画や画像を埋め込みする方法を詳説
  4. Windows10でブルーライトカットの設定 コントロールパネルの使い方
  5. WordPressエディタ「Gutenberg」の使い方 総まとめ
  6. エックスサーバーでSSL化設定をするやり方を詳細に解説してみた
  7. 【Basics of site construction】ワードプレスで日付を消す方法
  8. WordPressのフォルダ構成とバックアップの仕方

プログラミング関連

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の特徴と設定の仕方
AviUtl合成モードの種類とその効果 使い方
AviUtlのすべてのエフェクトについての解説①色系エフェクト
AviUtlの初期設定 システム設定とフィルターの順序などを詳しく解説
AviUtil カメラ制御の基本の基本を詳しく解説
AviUtlのすべてのエフェクトについての解説⑧ラスター・波紋・極座標変換・ディスプレイスメントマップ
AviUtlのすべてのエフェクトについての解説⑩アニメーション効果・シーンチェンジ・基本効果・振動・ノイズ
AviUtlのすべてのエフェクトについての解説⑪アニメーション効果(1)
HTMLとCSS 初歩的な文字装飾 基本まとめ

ソフト・アプリの使い方

PAGE TOP