ほんっとにはじめての HTML5 と CSS3

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

プラグインとは、この場合は「ブラウザ」に追加インストールして追加の機能を利用するものです。
代表的なプラグインは「Adobe Flash Player」「Windows Media Player」「Real Player」「QuickTime」「Microsoft Silverlight」「Adobe Reader」などがあります。

ただ、今どきのブラウザはもともとプラグイン機能を組み込んでおり「新たなプラグイン追加を非推奨」にしているものが多いそうです。なので、ユーザビリティを考えると <embed>要素は多用しないほうが良いそうです。
動画なら<video>要素、音声なら<audio>要素といった専用の要素を使えということでしょう。

また、Adobe Flashは 2020年末に終了することになったそうです。
（参考：Flash とインタラクティブコンテンツの未来 - Adobe Blog）

Flashはもともとマクロメディア社が開発したソフトウエアですが、Adobeに買われたあともゲームやサイトでよく使われていました。
2007年にジョブスがFlashのセキュリティ的な脆弱性を指摘し、iPhoneはFlashに非対応に。2011年には Adobeがモバイル向けのFlashの開発終了を発表。
昔はFlashでしかできなかった 軽い容量のアニメーションやインタラクティブな動作は、HTML5・CSS3・JavaScriptで同様な効果を作れるため、次第にシェアが少なくなっていきました。
Flash終了に伴って、各ブラウザ（Chrome、Firefox、IE/Edge、Safari）も 2020年末にはFlashの利用は不可能になる予定だそうです。

これでますます <embed>要素の出番は少なくなりそうな予感がします...。

まあそれはそれとして、続けます。

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

<embed>要素は、もとはNetscapeの独自要素で、いろんなブラウザでも使えるようになっていましたが、HTML4では非推奨になりました。それが、HTML5から標準仕様で復活しました。

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

また、<embed>要素の、name属性、align属性、hspace属性、vspace属性は廃止されました。

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

<embed src="video/uchiage.mp4" width="640" height="380" type="video/mp4" 
 autoplay="false" controller="true" pluginspage="https://support.apple.com/ja_JP/downloads/quicktime">

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

<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/">

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

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

<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タイプを指定。
MIMEタイプは「ちょっとメモ：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", など。
name、align、hspace、vspace属性は指定不可（単にプラグインにパラメータを送信する以外に副作用があるため）だそうです。

このほかグローバル属性も使います

id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

次回予告

次回は <video>要素を使ってみよう。
<video>要素は、動画をプラグイン無しで再生させるための要素で、HTML5 からの新要素です。

関連記事

• [69-3] Canvasに曲線を描こう（線のスタイルも）
• [69-2] Canvasに基本的な図形を描こう
• [69-1] canvas要素でグラフィックスを表示する領域を作ろう
• [68] 動画や音声に字幕やキャプションを表示しよう track要素
• [67]「mediagroup属性」でメディア要素を同期させよう
• [66] 音声をプラグイン無しで組み込もう audio要素・source要素
• [65] 動画をプラグイン無しで組み込もう video要素・source要素
• [64] プラグインで再生されるコンテンツを組み込もう embed要素
• [63] インラインフレームで 他のHTMLファイルを組み込もう iframe要素
• [62] 外部コンテンツを組み込もう　object要素・param要素
• [61] イメージマップ（リンク領域）を作ろう　map要素・area要素
• （ちょっとメモ）属性の「引用符」や「値」の省略について
• （ちょっとメモ）HTML5 での 省略可能なタグについて
• [60] フォームを美しく整えよう（CSS使用）
• [59] フォームの属性 逆引き一覧 (どの属性がどの部品に使えるか)

Tweet

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