基礎講座(前編)

マルチメディア・SNSの配置

HTMLには、動画や地図、SNSなどを埋め込むことが出来ます。公開されている多くのマルチメディアには、「共有する」という機能が備わっているため、ホームページ上で公開して情報を共有してもらいやすくするためです。

動画(YouTube)を埋め込む

Webページに、ビデオや音声、アニメーションを埋め込むには、2つの方法があります。

  • ウェブサービスが提供している「共有(シェア)機能」を利用する方法
  • HTMLのvideo要素を使用して直接(呼び出し)埋め込む

<iframe>とは

外部にあるコンテンツや動画を、<iframe>を使って埋め込むことが出来ます。

インラインフレームは、別のウェブサイトを表示させることも可能です。(注)セキュリティの観念から、表示することが出来ないコンテンツもあります。

共有(シェア)機能

みなさんのよく知る「YouTube」を、API(WebAPI)という機能を利用して表示させます。

Web API

API(WebAPI)

API(API、英: Application Programming Interface) とは
APIは、相互に連携するための仕組みです。自社と外部アプリケーションを連携したAPIを主にインターネットを通じて連携することを「Web API」といいます。Web APIを用いると、ネット上にある様々なアプリケーションを、簡単に利用することが可能になります。

YouTube

以下のような動画を読み込むことが出来ます。

▶︎ IFrame Player API
動画は、ファイル容量が非常に重く、ストレスなく再生する環境が必要になります。そこで、YouTubeやニコニコ動画などWebサービスの「共有機能」を利用する方法をおすすめします。専門知識は全く必要ありません。共有機能で自動生成される埋め込みコードをそのままコピーし、表示させたい箇所のHTMLコードに貼り付けるだけです。

Youtube動画の埋め込み方

  1. 埋め込みたい動画下にある「共有」をクリックします。
Youtube動画の埋め込み方

2.　「埋め込む」をクリックします。

リンクの共有→「埋め込む」

3.「動画の埋め込み」の下に表示されるコードをコピーし、配置したい箇所のHTMLへペーストします。

HTMLへコードをペーストする

IFrame を埋め込むには、読み込む動画の YouTube 動画 ID を、IFrame の src URL 内で指定します。

iframe width=”横幅” height=”縦幅”
src=”https://www.youtube.com/embed/動画ID

その他プレーヤーのパラメータについては、様々なカスタマイズが可能です。参考にしてみてください。
▶︎【参 考】YouTube 埋め込みプレーヤーとプレーヤーのパラメータ

地図(GoogleMap)を埋め込む

▶︎ https://www.google.co.jp/maps

マップの埋め込み方

1.グーグルが提供しているGoogleMapを表示させ、表示させたい場所や住所を検索します。

2. 表示させた場所の下にある「共有」をクリックし、「地図を埋め込む」→HTMLが表示されるので、コードをコピーし、表示させたい箇所へペーストします。

地図を埋め込む

HTML要素で直接埋め込む方法

video要素

HTMLには、動画や音声を設置するvideo要素、audio要素、embed要素、object要素があります。
下記の動画を取り入れて、呼び出して見ましょう。

<!-- 再生コントローラーを入れる場合 --->
<video controls src="動画データのURL"></video>

スマートフォンでも、自動再生させるには、パラメータを追加します。

<video src="動画のパス" poster="demo.jpg" playsinline muted autoplay loop></video>

Videoタグの属性

以下のパロメーターを、半角スペースで切って、記述します。

controlsコントロールバーの表示
playsinline表示領域内で再生
mutedミュート(無音再生)
autoplay自動再生
loop繰り返し再生
poster代替表示される画像

背景に動画を使う(CSS)

▶︎ サンプルを見る

CSSを使って、動画に文字を重ねることもできます。ダイナミックで、インパクトを与える動画は、非常に効果的ですが、ついサイズが大きくなりがち。再生されるまで時間がかかったり、ユーザにストレスを与えないよう、動画の容量には、細心の注意を払いましょう。

動画再生においては、パソコンとスマートフォン、Wi-Fiの状況 、モバイル機種やブラウザのバーションによって違いがあります。YouTube経由でデータを読み込みながら、リアルタイムで再生する「ストリーミング再生」は、ストレスなく再生できるため、一旦YouTubeにアップされた動画を取り込む手法がよく使われています。

動画を、アニメーションgifに変換するサイトなどがあります。
▶︎ MP4からGIFへのコンバーター

補足資料

(FlashPlayer)フラッシュプレイヤー」について
object要素を主としたフラッシュプレイヤー。ローカル側にプラグインをダウンロード後、動画再生させる手法が主流でした。長年、多くのユーザーに利用されてきたFlashですが、時代とともに様々な変革を遂げ、遂に2020年にサービスを終了する発表が行われました。

TOP