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

<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>の属性 （一覧はこちら）	src	：組み込むファイルのURL
	type	：組み込むファイルのMIMEタイプ
	width	：表示させるコンテンツの幅をピクセルで
	height	：表示させるコンテンツの高さピクセルで
	任意の属性	：プラグインが必要とする任意の属性と値を指定
	グローバル属性

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

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

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

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

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

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

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

HTMLはこのようになっています。

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

srcで組み込むファイルのURLを、widthとheightでそのファイルの幅と高さを指定します。typeではファイルのMIMEタイプを指定。

2行目の autoplay、controller、pluginspageは、プラグインで使用するための任意の属性です。autoplay="false"で自動再生させない、controller="true"でコントローラーの表示、pluginspage でプラグインのダウンロード先を指定しています。

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

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

サンプルは、 クリックで別ウィンドウで開きます。

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>要素だけで組み込んでいます。

フラッシュ（.swf）は、ブラウザによっては表示されません（許可することで表示できる場合もあります）

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

<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 からの新要素です。