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

最終更新日:2019年01月30日  (初回投稿日:2013年12月10日)

<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を、widthheightでそのファイルの幅と高さを指定します。typeではファイルのMIMEタイプを指定。

2行目の autoplaycontrollerpluginspageは、プラグインで使用するための任意の属性です。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 からの新要素です。

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

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

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

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

Re: 有難うございました

コメントくださった方、ありがとうございます!
私が貴方の年齢になった時、貴方のように勉強してチャレンジしていたい!と思いました。
私もまわりに教えてくれる人はいませんが、書籍やウェブで勉強していますよ。頑張りましょう!
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
11 | 2023/12 | 01
- - - - - 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
Profile

yuki★hata

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

メールフォームはこちら

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