[64] プラグインで再生されるコンテンツを組み込もう <embed>

<object>要素のときに、代替コンテンツとして登場しましたが、
<embed>要素は、プラグインで再生するコンテンツを組み込む要素です。
動画、音声、swfなどを組み込むのに使います。

プラグインとは、Flashファイル (.swf) を再生するFlash Player のように、ブラウザに追加インストールするものです。
代表的なプラグインは「Adobe Flash Player」「Windows Media Player」「Real Player」「QuickTime」「Microsoft Silverlight」「Adobe Reader」などがあります。

<embed>要素は空要素。終了タグはありません

使用する要素 <embed>(空要素。終了タグは不可)
<embed>の属性
一覧はこちら
src :組み込むファイルのURL
type :組み込むファイルのMIMEタイプ
width :表示させるコンテンツの幅をピクセルで
height :表示させるコンテンツの高さピクセルで
任意の属性 :プラグインが必要とする任意の属性と値を指定
グローバル属性

<embed>要素は、もとはNetscapeの独自要素で、いろんなブラウザでも使えるようになっていましたが、HTML4では仕様とされませんでした(非推奨になった)。
それが、HTML5から標準仕様で復活しました。
プラグインで再生するデータを読み込むには、シンプルで最適な要素です。

<embed>の代替コンテンツを指定するための <noembed>要素がありましたが、HTML5では採用されませんでした。
<video> <audio> <object> があるので、どちらかというと<embed>のほうが代替的になったためでしょうかね。
また、<embed>要素の、name属性、align属性、hspace属性、vspace属性は廃止されました。

動画ファイルを<embed>で組み込もう

前回の<object>のときのMP4ファイル(.mp4)を、<embed>要素だけで組み込みます。

←これは画像です。
クリックで別ウィンドウで開きます。

*動画ファイルのサイズは約1.2MBです。
(スペックの小さいPCでは、読み込みに少し時間がかかります)

HTMLソースはこのようになっています ↓ すごくシンプル。

<embed src="video/uchiage.mp4" width="640" height="380" type="video/mp4" 
 autoplay="false" controller="true" pluginspage="http://www.apple.com/jp/quicktime/download/">

srcで組み込むファイルのURLを、widthheightでそのファイルの幅と高さを指定します。
typeではファイルのMIMEタイプを指定。
2行目の autoplaycontrollerpluginspageは、プラグインで使用する任意の属性です。
autoplay="false"で自動再生させない、controller="true"でコントローラーの表示、pluginspage でプラグインのダウンロード先を指定しています。

音声ファイルを<embed>で組み込もう

同じく<object>のときのWAVEファイル(.wav)を、<embed>要素だけで組み込みます。

クリックで別ウィンドウで開きます。

*ファイルサイズは約870KBです。

HTMLソースはこのようになっています ↓ 

<embed src="audio/SPACE9.wav" type="audio/wav" width="240" height="50" autostart="false" 
 controller="true" loop="false"  pluginspage="http://www.apple.com/jp/quicktime/download/">

loop="false"で繰り返し再生をオフにしています。

swfファイルを<embed>で組み込もう

これまた同じく<object>のときのswfファイルを、<embed>要素だけで組み込んでいます。

HTMLソースはこのようになっています ↓ 

<embed src="img/sample_fla.swf" width="200" height="100" type="application/x-shockwave-flash" 
 quality="hjgh" pluginspage="https://get.adobe.com/jp/flashplayer/">

quality="hjgh"などの任意属性は、Flashでパブリッシュする時に設定したものを指定します。

<embed>の属性一覧

src="URL"
組み込むファイルのURL。
<embed src="video/ex.mp4" width="640" height="380" type="video/mp4" 
autoplay="false" controller="true" pluginspage="http://www.ex.com/">
type="MIMEタイプ"
組み込むファイルのMIMEタイプを指定。
text/html(HTML), application/pdf(PDF)video/mpeg(MPEG)など。
「ちょっとメモ:MIMEタイプ」を参照に。
<embed src="video/ex.mp4" width="640" height="380" type="video/mp4" 
autoplay="false" controller="true" pluginspage="http://www.ex.com/">
width="表示させるコンテンツの幅"  height="表示させるコンテンツの高さ"
表示させるコンテンツの幅、高さをピクセルで指定。(%指定は不可になりました)
<embed src="video/ex.mp4" width="640" height="380" type="video/mp4" 
autoplay="false" controller="true" pluginspage="http://www.ex.com/">
任意の属性="値"
プラグインが必要とする任意の属性を指定できる。
guality="high", loop="false", menu="false", bgcolor="#ccc", など。
このほかグローバル属性も使います
id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

次回予告

次回は「メディア要素」の<video>要素。HTML5 からの新要素です。
<video>要素は、動画をプラグイン無しで再生させるための要素です。
未対応ブラウザ向けの代替コンテンツとして、今回の <embed>要素を併用することもできます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

Re: 有難うございました

コメントくださった方、ありがとうございます!
私が貴方の年齢になった時、貴方のように勉強してチャレンジしていたい!と思いました。
私もまわりに教えてくれる人はいませんが、書籍やウェブで勉強していますよ。頑張りましょう!
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
02 | 2017/03 | 03
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.