initial commit

5 files changed, 1384 insertions, 0 deletions

diff --git a/files/zh-tw/learn/html/multimedia_and_embedding/html中的圖片/index.html b/files/zh-tw/learn/html/multimedia_and_embedding/html中的圖片/index.html
new file mode 100644
index 0000000000..5a2dfd7eff
--- /dev/null
+++ b/files/zh-tw/learn/html/multimedia_and_embedding/html中的圖片/index.html
@@ -0,0 +1,502 @@
+---
+title: HTML中的圖片
+slug: Learn/HTML/Multimedia_and_embedding/HTML中的圖片
+translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">最初的網頁最初的發展階段，只是文字。而只有文字想當然爾令網頁讀起來十分的枯燥乏味。然而幸運的是沒有多久，將圖片（以及其他更有趣的內容類型）嵌入網頁的功能就誕生了。 在多媒體嵌入網頁的學習中，從<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" title="The HTML &lt;img> element embeds an image into the document."><code>&lt;img&gt;</code></a>元素開始是相對適當，因為該元素用於在網頁中嵌入簡單的圖像。 在本文中，我們將研究如何深入使用它，包括在網頁中嵌入簡單圖像的基礎知識，使用&lt;figure&gt;增加標題說明以做註釋，以及詳細說明它與CSS背景圖片的關係。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">課成需求:</th>
+   <td>基本的電腦操作, <a href="/en-US/docs/">安裝軟體的能力</a>, <a href="/en-US/docs/">處理檔案的基本能力</a>, 熟悉最基本的HTML的 （<a href="/en-US/docs/">如HTML入門中所述</a>）</td>
+  </tr>
+  <tr>
+   <th scope="row">學習目標:</th>
+   <td>了解如何在HTML中嵌入簡單的圖片，為它們加上標題註釋，以及HTML圖片與CSS背景圖片之間的關係。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="如何將圖片放入網頁中">如何將圖片放入網頁中?</h2>
+
+<p>為了在網頁上放置一個簡單的圖像，我們使用&lt;img&gt;元素。 這是一個空元素（意味著它沒有文本內容或結束標記），並需要至少一個屬性（src）（有時稱為其完整標題，source）才有用。 src屬性包含指向要嵌入頁面的圖像的路徑，該路徑可以是相對路徑或絕對路徑URL，與&lt;a&gt;元素中的href屬性相同。</p>
+
+<div class="note">
+<p><strong>提醒</strong>: 在繼續之前，您應該閱讀有關URL和路徑的快速入門，以複習<a href="/en-US/docs/https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#A_quick_primer_on_URLs_and_paths">相對路徑和絕對路徑URL</a>。</p>
+</div>
+
+<p>舉例來說, 如果您的圖片名為 dinosaur.jpg 且與HTML檔案位於同一資料夾中，可以這樣嵌入圖片：</p>
+
+<pre class="brush: html notranslate">&lt;img src="dinosaur.jpg"&gt;</pre>
+
+<p>如果圖片位於名為images的資料夾中，且該目錄與HTML頁面位於同一資料夾（Google建議這樣的編排，以利於SEO /索引目的），則應將其嵌入如下：</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"&gt;</pre>
+
+<p>像這樣.</p>
+
+<div class="note">
+<p><strong>提醒</strong>: 搜索引擎還會讀取圖片名稱，並將其納入SEO中。 因此您應該為圖片提供一個描述性的檔名。 例如 dinosaur.jpg 的命名方式會比 img835.png 更好。</p>
+</div>
+
+<p>你也可以用絕對路徑URL來嵌入圖片，例如</p>
+
+<pre class="brush: html notranslate">&lt;img src="https://www.example.com/images/dinosaur.jpg"&gt;</pre>
+
+<p>但這麼做是沒有意義的，因為它只會使瀏覽器執行更多工作，瀏覽器需重複執行從DNS服務器中搜尋IP地址等等工作。您應將網站上的圖片與HTML存放在同一個伺服器上。</p>
+
+<div class="warning">
+<p><strong>注意:</strong> 大多數圖像均受版權保護。 請勿在你的網站上隨意顯示圖片，除非：</p>
+
+<ul>
+ <li>你是圖片的擁有者.</li>
+ <li>您已收到圖片所有者的白紙黑字認可。</li>
+ <li>您有充分的證據證明該圖片實際上是大家皆能使用。</li>
+</ul>
+
+<p>侵犯版權是違法及不道德的。 此外，切勿將src屬性指向您未被授權的他人網站上的圖便。 這稱為“熱連結”。再次重申，竊取某人的頻寬是違法的，且這會減慢您網站的速度。此外當別人變更、移除或換上令人尷尬的內容時你將無法做出改變。</p>
+</div>
+
+<p>我們上面的程式碼將有以下結果：</p>
+
+<p><img alt='A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it' src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>提醒</strong>: &lt;img&gt;和&lt;video&gt;之類的元素有時也稱為替換元素。 這是因為元素的內容和圖片大小是由外部（例如圖片或影音檔）所定義的，而不是由元素的內容定義。</p>
+</div>
+
+<div class="note">
+<p><strong>提醒</strong>: 您可以從在<a href="/zh-TW/docs/https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">Github</a>上找到本節完成的示例（參見<a href="/zh-TW/docs/https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">開源碼</a>。）</p>
+</div>
+
+<h3 id="替代性文字">替代性文字</h3>
+
+<p>我們下一個要看的屬性是alt。 它的功能算是圖片的文字描述，應用於因網路連接速度慢而無法看到/顯示圖片或需要長時間來跑圖等等情況。 例如，上面的程式碼我們可以像這樣修改：</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"&gt;</pre>
+
+<p>測試替代文字最簡單方法是故意拼錯檔名。 例如，如果我們的圖片名稱為dinosooooor.jpg，則瀏覽器將不會顯示該圖片，而是顯示alt文本：<img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<p>那麼，為什麼您會看到或需要替代文字？ 它可以派上用場的原因有很多：</p>
+
+<ul>
+ <li>使用者視力不佳，正在使用<a href="https://zh.wikipedia.org/wiki/%E8%9E%A2%E5%B9%95%E9%96%B1%E8%AE%80%E5%99%A8">螢幕閱讀器</a>向他們朗讀網頁。 實際上，對於大多數使用者而言，擁有可用於描述圖像的替代文字是很有用的。</li>
+ <li>如上所述，文件或路徑名的拼寫可能不正確。</li>
+ <li>瀏覽器不支持圖像類型。 有些人仍然使用純文字瀏覽器，例如<a href="https://zh.wikipedia.org/wiki/Lynx">Lynx</a>，它可顯示圖片的替代文字。</li>
+ <li>您可能希望提供文字供搜索引擎使用； 例如，搜索引擎可以將替代文字與搜索查詢匹配。</li>
+ <li>使用者已關閉圖像以減少數據傳輸量和干擾。 這在手機以及網路頻寬有限或成本昂貴的國家中尤其常見。</li>
+</ul>
+
+<p>您應該在<code>alt</code>屬性中確切寫些什麼？ 這取決於圖片為何而出現；也就是說，如果圖片不顯示，您將損失什麼：</p>
+
+<ul>
+ <li><strong>裝飾： </strong>你可以用 {{anch("CSS_背景圖片")}} 加入裝飾圖片，但如果必須使用HTML，可以添加一個空的 <code>alt=""</code>。如果圖片不是內容的一部分，那麼就不應該讓螢幕閱讀器浪費時間去閱讀它。</li>
+ <li><strong>內容： </strong>如果您的圖片提供了重要的資訊，請在簡短的<code>alt</code>文字中提供相同的資訊，甚至最好在所有人都能看到的主要文字中提供相同的資訊。請不要撰寫冗餘替代文字，試想如果所有段落都在主要內容中寫了兩次，對於用視力觀看的使用者有多煩人。如果圖像在正文中已充分敘述，請使用 <code>alt=""</code>。</li>
+ <li><strong>連結：</strong> 如果你在{{htmlelement("a")}} 標籤中放了圖片使其轉入連結，你仍應該提供<a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#%E4%BD%BF%E7%94%A8%E6%98%8E%E7%A2%BA%E7%9A%84%E5%AD%97%E8%A9%9E">明確的字詞</a>。在这种情况下，您可以根據適合你的情況，将其写在相同的<code>&lt;a&gt;</code>元素内，或是写在图像的<code>alt</code> 属性内。</li>
+ <li><strong>文字：</strong> 請不要在圖片中寫字。如果你的主要目的是為標題加上下拉式陰影，你可以<a href="/en-US/docs/Web/CSS/text-shadow">使用CSS</a>更甚於在圖片中描繪文字。 但如果你無法避免這麼做，也請將文字敘述加在<code>alt</code> 属性内。</li>
+</ul>
+
+<p>本質上，關鍵是即使在看不見圖片的情況下也能提供相同的體驗。這樣可以確保所有使用者都不會丟失任何內容。嘗試在瀏覽器中關閉圖像，然後查看外觀。您很快就會意識到，如果看不到圖片，替代文字會很有幫助。</p>
+
+<div class="note">
+<p><strong>Note</strong>: For more information, see our guide to <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text Alternatives</a>.</p>
+</div>
+
+<h3 id="寬與高">寬與高</h3>
+
+<p>You can use the <code>width</code> and <code>height</code> attributes to specify the width and height of your image. You can find your image's width and height in a number of ways. For example on the Mac you can use <kbd>Cmd</kbd> + <kbd>I</kbd> to get the info display up for the image file. Returning to our example, we could do this:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"&gt;</pre>
+
+<p>This doesn't result in much difference to the display, under normal circumstances. But if the image isn't being displayed, for example, the user has just navigated to the page, and the image hasn't yet loaded, you'll notice the browser is leaving a space for the image to appear in:</p>
+
+<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<p>This is a good thing to do, resulting in the page loading quicker and more smoothly.</p>
+
+<p>However, you shouldn't alter the size of your images using HTML attributes. If you set the image size too big, you'll end up with images that look grainy, fuzzy, or too small, and wasting bandwidth downloading an image that is not fitting the user's needs. The image may also end up looking distorted, if you don't maintain the correct <a href="https://en.wikipedia.org/wiki/Aspect_ratio_%28image%29">aspect ratio</a>. You should use an image editor to put your image at the correct size before putting it on your webpage.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you do need to alter an image's size, you should use <a href="/en-US/docs/Learn/CSS">CSS</a> instead.</p>
+</div>
+
+<h3 id="圖片標題">圖片標題</h3>
+
+<p>As <a href="https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Adding_supporting_information_with_%3Ctitle%3E">with links</a>, you can also add <code>title</code> attributes to images, to provide further supporting information if needed. In our example, we could do this:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"
+     title="A T-Rex on display in the Manchester University Museum"&gt;</pre>
+
+<p>This gives us a tooltip on mouse hover, just like link titles:</p>
+
+<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p>
+
+<p>However, this does not come recommended — <code>title</code> has a number of accessibility problems, mainly based around the fact that screen reader support is very unpredictable and most browsers won't show it unless you are hovering with a mouse (so e.g. no access to keyboard users). If you are interested in more information about this, read <a href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/">The Trials and Tribulations of the Title Attribute</a> by Scott O'Hara.</p>
+
+<p>It is better to include such supporting information in the main article text, rather than attached to the image.</p>
+
+<h3 id="實戰練習：嵌入圖片">實戰練習：嵌入圖片</h3>
+
+<p>It is now your turn to play! This active learning section will have you up and running with a simple embedding exercise. You are provided with a basic {{htmlelement("img")}} tag; we'd like you to embed the image located at the following URL:</p>
+
+<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p>
+
+<p>Earlier we said to never hotlink to images on other servers, but this is just for learning purposes, so we'll let you off this one time.</p>
+
+<p>We would also like you to:</p>
+
+<ul>
+ <li>Add some alt text, and check that it works by misspelling the image URL.</li>
+ <li>Set the image's correct <code>width</code> and <code>height</code> (hint: it is 200px wide and 171px high), then experiment with other values to see what the effect is.</li>
+ <li>Set a <code>title</code> on the image.</li>
+</ul>
+
+<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see an answer:</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
+&lt;img&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum"&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="用圖文和圖文標註說明圖像">用圖文和圖文標註說明圖像</h2>
+
+<p>Speaking of captions, there are a number of ways that you could add a caption to go with your image. For example, there would be nothing to stop you from doing this:</p>
+
+<pre class="brush: html notranslate">&lt;div class="figure"&gt;
+  &lt;img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341"&gt;
+
+  &lt;p&gt;A T-Rex on display in the Manchester University Museum.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>This is ok. It contains the content you need, and is nicely stylable using CSS. But there is a problem here: there is nothing that semantically links the image to its caption, which can cause problems for screen readers. For example, when you have 50 images and captions, which caption goes with which image?</p>
+
+<p>A better solution, is to use the HTML5 {{htmlelement("figure")}} and {{htmlelement("figcaption")}} elements. These are created for exactly this purpose: to provide a semantic container for figures, and to clearly link the figure to the caption. Our above example could be rewritten like this:</p>
+
+<pre class="notranslate">&lt;figure&gt;
+  &lt;img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341"&gt;
+
+  &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum.&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<p>The {{htmlelement("figcaption")}} element tells browsers, and assistive technology that the caption describes the other content of the {{htmlelement("figure")}} element.</p>
+
+<div class="note">
+<p><strong>Note</strong>: From an accessibility viewpoint, captions and {{htmlattrxref('alt','img')}} text have distinct roles. Captions benefit even people who can see the image, whereas {{htmlattrxref('alt','img')}} text provides the same functionality as an absent image. Therefore, captions and <code>alt</code> text shouldn't just say the same thing, because they both appear when the image is gone. Try turning images off in your browser and see how it looks.</p>
+</div>
+
+<p>A figure doesn't have to be an image. It is an independent unit of content that:</p>
+
+<ul>
+ <li>Expresses your meaning in a compact, easy-to-grasp way.</li>
+ <li>Could go in several places in the page's linear flow.</li>
+ <li>Provides essential information supporting the main text.</li>
+</ul>
+
+<p>A figure could be several images, a code snippet, audio, video, equations, a table, or something else.</p>
+
+<h3 id="實戰練習：建立圖文標註">實戰練習：建立圖文標註</h3>
+
+<p>In this active learning section, we'd like you to take the finished code from the previous active learning section, and turn it into a figure:</p>
+
+<ol>
+ <li>Wrap it in a {{htmlelement("figure")}} element.</li>
+ <li>Copy the text out of the <code>title</code> attribute, remove the <code>title</code> attribute, and put the text inside a {{htmlelement("figcaption")}} element below the image.</li>
+</ol>
+
+<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see an answer:</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;figure&gt;\n &lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"&gt;\n &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum&lt;/figcaption&gt;\n&lt;/figure&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="CSS_背景圖片">CSS 背景圖片</h2>
+
+<p>您還可以使用CSS將圖像嵌入網頁（JavaScript也可以，但這完全是另一回事了）。 CSS<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-image" title="The background-image CSS property sets one or more background images on an element."><code>background-image</code></a>屬性和其他background- *屬性用於控制背景圖片的放置。 例如要將背景圖片放置在頁面的每個段落上，可以執行以下操作：</p>
+
+<pre class="brush: css notranslate">p {
+  background-image: url("images/dinosaur.jpg");
+}</pre>
+
+<p>這種嵌入圖片的方式比HTML圖像更容易定位和控制。 那麼，為什麼還要用HTML嵌入圖片呢？ 如上所述，CSS背景圖像僅用於裝飾。 如果您只是想在頁面上添加一些漂亮的東西以增強視覺效果，那很好。 但是，此類圖像根本沒有語義。 它們與文字不同，對於螢幕閱讀器是不可見的，依此類推。 這裡需要的是HTML圖片！</p>
+
+<p>總結來說，如果圖片在內容上具有含義，則應使用HTML圖像。 如果圖像純粹是裝飾性的，則應使用CSS背景圖片。</p>
+
+<div class="note">
+<p><strong>提醒</strong>: 在我們的CSS主題中，您將學到更多關於CSS背景圖片的知識。</p>
+</div>
+
+<h2 id="試試看!">試試看!</h2>
+
+<p>您已經來到了本文的末端，但是您還記得最重要的內容嗎？ 在繼續往下之前，這裡有些測驗讓您驗證看看您是否都學會了 — <a href="/zh-TW/docs/https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_images">測驗：HTML圖像</a>。</p>
+
+<h2 id="總結">總結</h2>
+
+<p>目前就是這樣啦。 我們已經詳細介紹了圖片和標題說明。 在下一篇文章中我們將進一步介紹，如何使用HTML將視頻和音頻嵌入在網頁中。</p>
+
+<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="在這個主題中">在這個主題中</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>
diff --git a/files/zh-tw/learn/html/multimedia_and_embedding/index.html b/files/zh-tw/learn/html/multimedia_and_embedding/index.html
new file mode 100644
index 0000000000..05d98a462b
--- /dev/null
+++ b/files/zh-tw/learn/html/multimedia_and_embedding/index.html
@@ -0,0 +1,53 @@
+---
+title: Multimedia and Embedding
+slug: Learn/HTML/Multimedia_and_embedding
+translation_of: Learn/HTML/Multimedia_and_embedding
+---
+<p>{{LearnSidebar}}</p>
+
+<p class="summary">到目前為止，我們已經看到了很多文字，但是只使用文字讓人感到無聊。讓我們開始研究如何透過更有趣的內容讓網絡變得活躍起來！本單元探討如何使用HTML在您的網頁中包增加媒體，包括可以嵌入圖像的不同方式，以及如何嵌入影片，音訊甚至整個網頁。</p>
+
+<h2 id="預備知識">預備知識</h2>
+
+<p>在此單元開始之前，我們假設你對HTML基礎知識 (如<a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML">HTML介紹</a>) 已經有一定的了解，如果還沒有，建議您先預習該部分再回來。</p>
+
+<div class="note">
+<p><strong>Note</strong>: 如果你所操作的電腦、平板或裝置環境不允許你建立自己的檔案，你可以在諸如 <a href="https://jsbin.com/">JSBin</a> 或<a href="https://thimble.mozilla.org/">Thimble</a> 這樣的網站上嘗試(多數的)範例程式碼。</p>
+</div>
+
+<h2 id="導覽">導覽</h2>
+
+<p>本單元包含以下章節，它們將帶您了解在網頁上嵌入多媒體的所有基礎知識。</p>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML中的圖片</a></dt>
+ <dd>可以考慮到的多媒體種類很多，但是從用以將簡單圖像嵌入網頁中不起眼的{{htmlelement(" img")}}元素開始是很合乎邏輯的。在本文中，我們將研究如何更深入地使用它，包括基礎知識，使用{{htmlelement("figure")}}加上標題的註釋以及它與CSS背景圖像的關係。</dd>
+ <dt><a href="/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">視訊與音訊內容</a></dt>
+ <dd>接著，我們將研究如何使用HTML5 {{htmlelement("video")}}和{{htmlelement("audio")}} 元素在頁面上嵌入視訊和音訊，包括基本知識，以提供對不同頁面的訪問文件格式添加到不同的瀏覽器，添加標題和字幕，以及如何為舊版瀏覽器添加後備廣告。</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies" rel="nofollow">從物件到 iframe — 其他嵌入技巧</a></dt>
+ <dd>在這裡，我們想橫跨一步，著眼於幾個元素，這些元素可以使您將各種內容類型嵌入到網頁中：{{htmlelement("iframe")}}，{{htmlelement("embed")}}和 {{htmlelement("object")}}元素。 &lt;iframe&gt;用於嵌入其他網頁，另外兩個允許您嵌入PDF，SVG甚至Flash（一種即將消逝的技術，但您可能仍會定期看到它）。</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web" rel="nofollow">為 Web 新增向量圖</a></dt>
+ <dd>向量圖形在某些情況下可能非常有用。 與PNG / JPG等常見格式不同，它們在放大時不會失真/像素化-在縮放時可以保持平滑。 本文向您介紹什麼是向量圖，以及如何在網頁中加入流行的{{glossary("SVG")}}格式。</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images" rel="nofollow">適應性圖片</a></dt>
+ <dd>在本文中，我們將學習適應性圖片 (又稱響應式圖片)的概念。適應性圖片在不同螢幕尺寸，解析度和其他類似功能差異很大的設備上都能很好地運作。我們還會研究HTML提供了哪些工具來幫助實現它們。 這有助於提高不同設備之間的性能。 響應式圖片只是響應式設計的一部分，在將來您學習CSS的單元中還會有響應式圖片的單元。</dd>
+</dl>
+
+<h2 id="評量">評量</h2>
+
+<p>以下評量中將測試您對以上指南中介紹的HTML基礎的理解：</p>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla 啟動頁面</a></dt>
+ <dd>在此測驗中，我們將測試您對本區塊文章中討論的一些技術的了解，使您能夠向時髦的啟動頁面添加有關Mozilla的一些圖片和視訊！</dd>
+</dl>
+
+<h2 id="另見">另見</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">增加點擊映射到圖片上層</a></dt>
+ <dd>圖像映射提供了一種機制，可以使圖像的不同部分鏈接到不同的位置。（請試想在地圖上點擊每個不同國家/地區以取得更多資訊）此技術有時很有用。</dd>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">網頁知識基礎2</a></dt>
+ <dd>
+ <p>一個出色的Mozilla基礎課程，探索和測試此多媒體和嵌入單元中討論的一些技能。 深入研究網頁組成，可訪問性設計，共享資源，使用線上媒體和開放性工作的基礎知識（這意味著您的內容可以免費獲得併可以由他人共享）。</p>
+ </dd>
+</dl>
diff --git a/files/zh-tw/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/zh-tw/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
new file mode 100644
index 0000000000..aa4de14fe3
--- /dev/null
+++ b/files/zh-tw/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
@@ -0,0 +1,339 @@
+---
+title: Video and audio content
+slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+tags:
+  - Article
+  - Audio
+  - Beginner
+  - Guide
+  - HTML
+  - NeedsTranslation
+  - TopicStub
+  - Video
+  - captions
+  - subtitles
+  - track
+translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary"><span class="seoSummary">Now that we are comfortable with adding simple images to a webpage, the next step is to start adding video and audio players to your HTML documents! In this article we'll look at doing just that with the {{htmlelement("video")}} and {{htmlelement("audio")}} elements; we'll then finish off by looking at how to add captions/subtitles to your videos.</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, familiarity with HTML fundamentals (as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>) and <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To learn how to embed video and audio content into a webpage, and add captions/subtitles to video.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Video_and_audio_on_the_web">Video and audio on the web</h2>
+
+<p>Web developers have wanted to use video and audio on the Web for a long time, ever since the early 2000s when we started to have bandwidth fast enough to support any kind of video (video files are much larger than text or even images.) In the early days, native web technologies such as HTML didn't have the ability to embed video and audio on the Web, so proprietary (or plugin-based) technologies like <a href="https://en.wikipedia.org/wiki/Adobe_Flash">Flash</a> (and later, <a href="https://en.wikipedia.org/wiki/Microsoft_Silverlight">Silverlight</a>) became popular for handling such content. This kind of technology worked ok, but it had a number of problems, including not working well with HTML/CSS features, security issues, and accessibility issues.</p>
+
+<p>A native solution would solve much of this if implemented correctly. Fortunately, a few years later the {{glossary("HTML5")}} specification had such features added, with the {{htmlelement("video")}} and {{htmlelement("audio")}} elements, and some shiny new {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} for controlling them. We'll not be looking at JavaScript here — just the basic foundations that can be achieved with HTML.</p>
+
+<p>We won't be teaching you how to produce audio and video files — that requires a completely different skillset. We have provided you with <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">sample audio and video files and example code</a> for your own experimentation, in case you are unable to get hold of your own.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Before you begin here, you should also know that there are quite a few OVPs (online video providers) like <a href="https://www.youtube.com/">YouTube</a>, <a href="https://www.dailymotion.com">Dailymotion</a>, and <a href="https://vimeo.com/">Vimeo</a>, and online audio providers like <a href="https://soundcloud.com/">Soundcloud</a>. Such companies offer a convenient, easy way to host and consume videos, so you don't have to worry about the enormous bandwidth consumption. OVPs even usually offer ready-made code for embedding video/audio in your webpages; if you use that route, you can avoid some of the difficulties we discuss in this article. We'll be discussing this kind of service a bit more in the next article.</p>
+</div>
+
+<h3 id="The_&lt;video>_element">The &lt;video&gt; element</h3>
+
+<p>The {{htmlelement("video")}} element allows you to embed a video very easily. A really simple example looks like this:</p>
+
+<pre class="brush: html notranslate">&lt;video src="rabbit320.webm" controls&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.webm"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>The features of note are:</p>
+
+<dl>
+ <dt>{{htmlattrxref("src","video")}}</dt>
+ <dd>In the same way as for the {{htmlelement("img")}} element, the <code>src</code> (source) attribute contains a path to the video you want to embed. It works in exactly the same way.</dd>
+ <dt>{{htmlattrxref("controls","video")}}</dt>
+ <dd>Users must be able to control video and audio playback (it's especially critical for people who have <a href="https://en.wikipedia.org/wiki/Epilepsy#Epidemiology">epilepsy</a>.) You must either use the <code>controls</code> attribute to include the browser's own control interface, or build your interface using the appropriate <a href="/en-US/docs/Web/API/HTMLMediaElement">JavaScript API</a>. At a minimum, the interface must include a way to start and stop the media, and to adjust the volume.</dd>
+ <dt>The paragraph inside the <code>&lt;video&gt;</code> tags</dt>
+ <dd>This is called <strong>fallback content</strong> — this will be displayed if the browser accessing the page doesn't support the <code>&lt;video&gt;</code> element, allowing us to provide a fallback for older browsers. This can be anything you like; in this case, we've provided a direct link to the video file, so the user can at least access it some way regardless of what browser they are using.</dd>
+</dl>
+
+<p>The embedded video will look something like this:</p>
+
+<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p>
+
+<p>You can <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">try the example live</a> here (see also the <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">source code</a>.)</p>
+
+<h3 id="Using_multiple_source_formats_to_improve_compatibility">Using multiple source formats to improve compatibility</h3>
+
+<p>There's a problem with the above example, which you may have noticed already if you've tried to access the live link above with an older browser like Internet Explorer or even an older version of Safari. The video won't play, because different browsers support different video (and audio) formats. Fortunately, there are things you can do to help prevent this from being a problem.</p>
+
+<h4 id="Contents_of_a_media_file">Contents of a media file</h4>
+
+<p>First, let's go through the terminology quickly. Formats like MP3, MP4 and WebM are called <strong><a href="/en-US/docs/Web/Media/Formats/Containers">container formats</a></strong>. They define a structure in which the audio and/or video tracks that make up the media are stored, along with metadata describing the media, what codecs are used to encode its channels, and so forth.</p>
+
+<p>A WebM file containing a movie which has a main video track and one alternate angle track, plus audio for both English and Spanish, in addition to audio for an English commentary track can be conceptualized as shown in the diagram below. Also included are text tracks containing closed captions for the feature film, Spanish subtitles for the film, and English captions for the commentary.</p>
+
+<p><a href="https://mdn.mozillademos.org/files/16898/ContainersAndTracks.svg"><img alt="Diagram conceptualizing the contents of a media file at the track level." src="https://mdn.mozillademos.org/files/16898/ContainersAndTracks.svg" style="height: 472px; width: 640px;"></a></p>
+
+<p>The audio and video tracks within the container hold data in the appropriate format for the codec used to encode that media. Different formats are used for audio tracks versus video tracks. Each audio track is encoded using an <a href="/en-US/docs/Web/Media/Formats/Audio_codecs">audio codec</a>, while video tracks are encoded using (as you probably have guessed) <a href="/en-US/docs/Web/Media/Formats/Video_codecs">a video codec</a>. As we talked about before, different browsers support different video and audio formats, and different container formats (like MP3, MP4, and WebM, which in turn can contain different types of video and audio).</p>
+
+<p>For example:</p>
+
+<ul>
+ <li>A WebM container typically packages Vorbis or Opus audio with VP8/VP9 video. This is supported in all modern browsers, though older versions may not work.</li>
+ <li>An MP4 container often packages AAC or MP3 audio with H.264 video. This is also supported in all modern browsers, as well as Internet Explorer.</li>
+ <li>The Ogg container tends to use Vorbis audio and Theora video. This is best supported in Firefox and Chrome, but has basically been superseded by the better quality WebM format.</li>
+</ul>
+
+<p>There are some special cases. For example, for some types of audio, a codec's data is often stored without a container, or with a simplified container. One such instance is the FLAC codec, which is stored most commonly in FLAC files, which are just raw FLAC tracks.</p>
+
+<p>Another such situation is the always-popular MP3 file. An "MP3 file" is actually an MPEG-1 Audio Layer III (MP3) audio track stored within an MPEG or MPEG-2 container. This is especially interesting since while most browsers don't support using MPEG media in the {{HTMLElement("video")}} and {{HTMLElement("audio")}} elements, they may still support MP3 due to its popularity.</p>
+
+<p>An audio player will tend to play an audio track directly, e.g. an MP3 or Ogg file. These don't need containers.</p>
+
+<h4 id="Media_file_support_in_browsers">Media file support in browsers</h4>
+
+<div class="callout-box">
+<p>Why do we have this problem? It turns out that several popular formats, such as MP3 and MP4/H.264, are excellent but are encumbered by patents; that is, there are patents covering some or all of the technology that they're based upon. In the United States, patents covered MP3 until 2017, and H.264 is encumbered by patents through at least 2027.</p>
+
+<p>Because of those patents, browsers that wish to implement support for those codecs must pay typically enormous license fees. In addition, some people simply prefer to avoid restricted software and prefer to use only open formats. Due to these legal and preferential reasons, web developers find themselves having to support multiple formats to capture their entire audience.</p>
+</div>
+
+<p>The codecs described in the previous section exist to compress video and audio into manageable files, since raw audio and video are both exceedingly large. Each web browser supports an assortment of <strong>{{Glossary("Codec","codecs")}}</strong>, like Vorbis or H.264, which are used to convert the compressed audio and video into binary data and back. Each codec offers its own advantages and drawbacks, and each container may also offer its own positive and negative features affecting your decisions about which to use.</p>
+
+<p>Things become slightly more complicated because not only does each browser support a different set of container file formats, they also each support a different selection of codecs. In order to maximize the likelihood that your web site or app will work on a user's browser, you may need to provide each media file you use in multiple formats. If your site and the user's browser don't share a media format in common, your media simply won't play.</p>
+
+<p>Due to the intricacies of ensuring your app's media is viewable across every combination of browsers, platforms, and devices you wish to reach, choosing the best combination of codecs and container can be a complicated task. See {{SectionOnPage("/en-US/docs/Web/Media/Formats/Containers", "Choosing the right container")}} for help selecting the container file format best suited for your needs; similarly, see {{SectionOnPage("/en-US/docs/Web/Media/Formats/Video_codecs", "Choosing a video codec")}} and {{SectionOnPage("/en-US/docs/Web/Media/Formats/Audio_codecs", "Choosing an audio codec")}} for help selecting the first media codecs to use for your content and your target audience.</p>
+
+<p>One additional thing to keep in mind: mobile browsers may support additional formats not supported by their desktop equivalents, just like they may not support all the same formats the desktop version does. On top of that, both desktop and mobile browsers <em>may</em> be designed to offload handling of media playback (either for all media or only for specific types it can't handle internally). This means media support is partly dependent on what software the user has installed.</p>
+
+<p>So how do we do this? Take a look at the following <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">updated example</a> (<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">try it live here</a>, also):</p>
+
+<pre class="brush: html notranslate">&lt;video controls&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Here we've taken the <code>src</code> attribute out of the actual {{HTMLElement("video")}} tag, and instead included separate {{htmlelement("source")}} elements that point to their own sources. In this case the browser will go through the {{HTMLElement("source")}} elements and play the first one that it has the codec to support. Including WebM and MP4 sources should be enough to play your video on most platforms and browsers these days.</p>
+
+<p>Each <code>&lt;source&gt;</code> element also has a {{htmlattrxref("type", "source")}} attribute. This is optional, but it is advised that you include it. The <code>type</code> attribute contains the {{glossary("MIME type")}} of the file specified by the <code>&lt;source&gt;</code>, and browsers can use the <code>type</code> to immediately skip videos they don't understand. If<code>type</code> isn't included, browsers will load and try to play each file until they find one that works, which obviously takes time and is an unnecessary use of resources.</p>
+
+<p>Refer to our <a href="/en-US/docs/Web/Media/Formats">guide to media types and formats</a> for help selecting the best containers and codecs for your needs, as well as to look up the right MIME types to specify for each.</p>
+
+<h3 id="Other_&lt;video>_features">Other &lt;video&gt; features</h3>
+
+<p>There are a number of other features you can include when displaying an HTML video. Take a look at our next example:</p>
+
+<pre class="brush: html notranslate">&lt;video controls width="400" height="400"
+       autoplay loop muted preload="auto"
+       poster="poster.png"&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Your browser doesn't support HTML video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/video&gt;
+</pre>
+
+<p>The resulting UI looks something like this:</p>
+
+<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/16949/poster_screenshot_updated.png" style="border-style: solid; border-width: 1px; display: block; height: 470px; margin: 0px auto; width: 413px;"></p>
+
+<p>The new features are:</p>
+
+<dl>
+ <dt>{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}</dt>
+ <dd>You can control the video size either with these attributes or with {{Glossary("CSS")}}. In both cases, videos maintain their native width-height ratio — known as the <strong>aspect ratio</strong>. If the aspect ratio is not maintained by the sizes you set, the video will grow to fill the space horizontally, and the unfilled space will just be given a solid background color by default.</dd>
+ <dt>{{htmlattrxref("autoplay","video")}}</dt>
+ <dd>Makes the audio or video start playing right away, while the rest of the page is loading. You are advised not to use autoplaying video (or audio) on your sites, because users can find it really annoying.</dd>
+ <dt>{{htmlattrxref("loop","video")}}</dt>
+ <dd>Makes the video (or audio) start playing again whenever it finishes. This can also be annoying, so only use if really necessary.</dd>
+ <dt>{{htmlattrxref("muted","video")}}</dt>
+ <dd>Causes the media to play with the sound turned off by default.</dd>
+ <dt>{{htmlattrxref("poster","video")}}</dt>
+ <dd>The URL of an image which will be displayed before the video is played. It is intended to be used for a splash screen or advertising screen.</dd>
+ <dt>{{htmlattrxref("preload","video")}}</dt>
+ <dd>
+ <p>Used for buffering large files; it can take one of three values:</p>
+
+ <ul>
+  <li><code>"none"</code> does not buffer the file</li>
+  <li><code>"auto"</code> buffers the media file</li>
+  <li><code>"metadata"</code> buffers only the metadata for the file</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>You can find the above example available to <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">play live on Github</a> (also <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">see the source code</a>.) Note that we haven't included the <code>autoplay</code> attribute in the live version — if the video starts to play as soon as the page loads, you don't get to see the poster!</p>
+
+<h3 id="The_&lt;audio>_element">The &lt;audio&gt; element</h3>
+
+<p>The {{htmlelement("audio")}} element works just like the {{htmlelement("video")}} element, with a few small differences as outlined below. A typical example might look like so:</p>
+
+<pre class="brush: html notranslate">&lt;audio controls&gt;
+  &lt;source src="viper.mp3" type="audio/mp3"&gt;
+  &lt;source src="viper.ogg" type="audio/ogg"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 audio. Here is a &lt;a href="viper.mp3"&gt;link to the audio&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/audio&gt;</pre>
+
+<p>This produces something like the following in a browser:</p>
+
+<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">run the audio demo live</a> on Github (also see the <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">audio player source code</a>.)</p>
+</div>
+
+<p>This takes up less space than a video player, as there is no visual component — you just need to display controls to play the audio. Other differences from HTML video are as follows:</p>
+
+<ul>
+ <li>The {{htmlelement("audio")}} element doesn't support the <code>width</code>/<code>height</code> attributes — again, there is no visual component, so there is nothing to assign a width or height to.</li>
+ <li>It also doesn't support the <code>poster</code> attribute — again, no visual component.</li>
+</ul>
+
+<p>Other than this, <code>&lt;audio&gt;</code> supports all the same features as <code>&lt;video&gt;</code> — review the above sections for more information about them.</p>
+
+<h3 id="Restarting_media_playback_requires_JavaScript">Restarting media playback (requires JavaScript)</h3>
+
+<p>At any time, you can reset the media to the beginning—including the process of selecting the best media source, if more than one is specified using {{HTMLElement("source")}} elements—by calling the element's {{domxref("HTMLMediaElement.load", "load()")}} method:</p>
+
+<pre class="brush: js notranslate">const mediaElem = document.getElementById("my-media-element");
+mediaElem.load();</pre>
+
+<h3 id="Detecting_track_addition_and_removal_requires_JavaScript">Detecting track addition and removal (requires JavaScript)</h3>
+
+<p>You can monitor the track lists within a media element to detect when tracks are added to or removed from the element's media. For example, you can watch for the {{event("addtrack")}} event being fired on the associated {{domxref("AudioTrackList")}} object (retrieved via {{domxref("HTMLMediaElement.audioTracks")}}) to be informed when audio tracks are added to the media:</p>
+
+<pre class="brush: js notranslate">const mediaElem = document.querySelector("video");
+mediaElem.audioTracks.onaddtrack = function(event) {
+  audioTrackAdded(event.track);
+}
+</pre>
+
+<p>You'll find more information about this in our {{domxref("TrackEvent")}} documentation.</p>
+
+<h2 id="Displaying_video_text_tracks">Displaying video text tracks</h2>
+
+<p>Now we'll discuss a slightly more advanced concept that is really useful to know about. Many people can't or don't want to hear the audio/video content they find on the Web, at least at certain times. For example:</p>
+
+<ul>
+ <li>Many people have auditory impairments (such as being hard of hearing or deaf) so can't hear the audio clearly if at all.</li>
+ <li>Others may not be able to hear the audio because they are in noisy environments (like a crowded bar when a sports game is being shown).</li>
+ <li>Similarly, in environments where having the audio playing would be a distraction or disruption (such as in a library or when a partner is trying to sleep), having captions can be very useful.</li>
+ <li>People who don't speak the language of the video might want a text transcript or even translation to help them understand the media content.</li>
+</ul>
+
+<p>Wouldn't it be nice to be able to provide these people with a transcript of the words being spoken in the audio/video? Well, thanks to HTML video, you can. To do so we use the <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> file format and the {{htmlelement("track")}} element.</p>
+
+<div class="note">
+<p><strong>Note</strong>: "Transcribe" means "to write down spoken words as text." The resulting text is a "transcript."</p>
+</div>
+
+<p>WebVTT is a format for writing text files containing multiple strings of text along with metadata such as the time in the video at which each text string should be displayed, and even limited styling/positioning information. These text strings are called <strong>cues</strong>, and there are several kinds of cues which are used for different purposes. The most common cues are:</p>
+
+<dl>
+ <dt>subtitles</dt>
+ <dd>Translations of foreign material, for people who don't understand the words spoken in the audio.</dd>
+ <dt>captions</dt>
+ <dd>Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.</dd>
+ <dt>timed descriptions</dt>
+ <dd>Text which should be spoken by the media player in order to describe important visuals to blind or otherwise visually impaired users.</dd>
+</dl>
+
+<p>A typical WebVTT file will look something like this:</p>
+
+<pre class="eval line-numbers  language-html notranslate"><code class="language-html">WEBVTT
+
+1
+00:00:22.230 --&gt; 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --&gt; 00:00:34.074
+This is the second.
+
+  ...</code>
+</pre>
+
+<p>To get this displayed along with the HTML media playback, you need to:</p>
+
+<ol>
+ <li>Save it as a <code>.vtt</code> file in a sensible place.</li>
+ <li>Link to the <code>.vtt</code> file with the {{htmlelement("track")}} element. <code>&lt;track&gt;</code> should be placed within <code>&lt;audio&gt;</code> or <code>&lt;video&gt;</code>, but after all <code>&lt;source&gt;</code> elements. Use the {{htmlattrxref("kind","track")}} attribute to specify whether the cues are <code>subtitles</code>, <code>captions</code>, or <code>descriptions</code>. Further, use {{htmlattrxref("srclang","track")}} to tell the browser what language you have written the subtitles in.</li>
+</ol>
+
+<p>Here's an example:</p>
+
+<pre class="brush: html notranslate">&lt;video controls&gt;
+    &lt;source src="example.mp4" type="video/mp4"&gt;
+    &lt;source src="example.webm" type="video/webm"&gt;
+    &lt;track kind="subtitles" src="subtitles_es.vtt" srclang="es"&gt;
+&lt;/video&gt;</pre>
+
+<p>This will result in a video that has subtitles displayed, kind of like this:</p>
+
+<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p>
+
+<p>For more details, please read <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>. You can <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">find the example</a> that goes along with this article on Github, written by Ian Devlin (see the <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">source code</a> too.) This example uses some JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Text tracks also help you with {{glossary("SEO")}}, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.</p>
+</div>
+
+<h3 id="Active_learning_Embedding_your_own_audio_and_video">Active learning: Embedding your own audio and video</h3>
+
+<p>For this active learning, we'd (ideally) like you to go out into the world and record some of your own video and audio — most phones these days allow you to record audio and video very easily and, provided you can transfer it on to your computer, you can use it. You may have to do some conversion to end up with a WebM and MP4 in the case of video, and an MP3 and Ogg in the case of audio, but there are enough programs out there to allow you to do this without too much trouble, such as <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> and <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. We'd like you to have a go!</p>
+
+<p>If you are unable to source any video or audio, then you can feel free to use our <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">sample audio and video files</a> to carry out this exercise. You can also use our sample code for reference.</p>
+
+<p>We would like you to:</p>
+
+<ol>
+ <li>Save your audio and video files in a new directory on your computer.</li>
+ <li>Create a new HTML file in the same directory, called <code>index.html</code>.</li>
+ <li>Add {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements to the page; make them display the default browser controls.</li>
+ <li>Give both of them {{HTMLElement("source")}} elements so that browsers will find the audio format they support best and load it. These should include {{htmlattrxref("type", "source")}} attributes.</li>
+ <li>Give the <code>&lt;video&gt;</code> element a poster that will be displayed before the video starts to be played. Have fun creating your own poster graphic.</li>
+</ol>
+
+<p>For an added bonus, you could try researching text tracks, and work out how to add some captions to your video.</p>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding">Test your skills: Multimedia and embedding</a>. Note that the third assessment question in this test assumes knowledge of some of the techniques covered in the <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">next article</a>, so you may want to read that before attempting it.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>And that's a wrap; we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like {{htmlelement("iframe")}} and {{htmlelement("object")}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML media elements: {{htmlelement("audio")}}, {{htmlelement("video")}}, {{htmlelement("source")}}, and {{htmlelement("track")}}</li>
+ <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video delivery</a>: A LOT of detail about putting audio and video onto web pages using HTML and JavaScript.</li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Audio and Video manipulation</a>: A LOT of detail about manipulating audio and video using JavaScript (for example adding filters.)</li>
+ <li>Automated options to <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">translate multimedia</a>.</li>
+ <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>
diff --git a/files/zh-tw/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.html b/files/zh-tw/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.html
new file mode 100644
index 0000000000..951de62ef5
--- /dev/null
+++ b/files/zh-tw/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.html
@@ -0,0 +1,104 @@
+---
+title: 測試你的技能：多媒體和嵌入
+slug: >-
+  Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding
+tags:
+  - HTML
+  - 初學者
+  - 多媒體
+  - 學習
+  - 嵌入
+  - 測驗
+translation_of: >-
+  Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding
+---
+<div>{{learnsidebar}}</div>
+
+<div>這項技能測試的目的是評估您是否了解我們的<a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">視訊和音訊內容</a>以及<a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">從物件到iframe的其他嵌入技術</a>文章。</div>
+
+<div></div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 您可以在下面的交互式編輯器中嘗試解決方案，但是下載代碼並使用在線工具如 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> 去完成測試。<br>
+ <br>
+ 如果您遇到困難，請向我們尋求幫助-請參閱 {{anch("Assessment or further help")}} 此頁面底部的部分。</p>
+</div>
+
+<h2 id="多媒體和嵌入1">多媒體和嵌入1</h2>
+
+<p>在此測試中，我們希望您將一個簡單的音檔嵌入到頁面上。你需要：</p>
+
+<ul>
+ <li>將音頻文件的路徑添加到適當的屬性，以將其嵌入頁面中。音檔名為<code>audio.mp3</code>，位於當前文件夾中的文件夾<code>media</code>中。</li>
+ <li>添加屬性讓瀏覽器顯示一些預設控制選項。</li>
+ <li>為不支持的音檔撥放的瀏覽器添加一些適當的備註。</li>
+</ul>
+
+<p>嘗試更新下面的程式碼以完成測驗：</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/media-embed/mediaembed1.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/tasks/media-embed/mediaembed1-download.html">下載此測驗的程式碼</a>在你自己的編輯器或線上編輯器中運行。</p>
+</div>
+
+<h2 id="多媒體和嵌入2">多媒體和嵌入2</h2>
+
+<p>在此測驗中，我們希望你標記一個稍微複雜一些的影片播放器，此外還具有多個來源、字幕和其他功能。你需要：</p>
+
+<ul>
+ <li>添加屬性以使瀏覽器顯示一些預設控制選項。</li>
+ <li>為不支持的影片撥放的瀏覽器添加一些適當的備註。</li>
+ <li>添加多個源，其中包含視頻文件的路徑。這些文件稱為 <code>video.mp4</code> 和 <code>video.webm</code>, 並且位於一個名為<code>media</code>的文件夾中。</li>
+ <li>讓瀏覽器提前知道影片來源的影片格式，以便可以提前選擇要下載的影片。</li>
+ <li>給予 <code>&lt;video&gt;</code> 寬度和高度等於固定大小（320 x 240像素）。</li>
+ <li>使影片默認為靜音。</li>
+ <li>顯示包含在 <code>media</code> 資料夾, 在一個名為 <code>subtitles_en.vtt</code>, 播放視頻時，您必須將類型明確設置為字幕，並且字幕語言為英語。</li>
+</ul>
+
+<p>嘗試更新下面的程式碼以完成測驗：</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/media-embed/mediaembed2.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/tasks/media-embed/mediaembed2-download.html">下載此測驗的程式碼</a>在你自己的編輯器或線上編輯器中運行。</p>
+</div>
+
+<h2 id="多媒體和嵌入3">多媒體和嵌入3</h2>
+
+<p>對於此最終測驗，你需要執行兩個測驗：</p>
+
+<ul>
+ <li>將PDF嵌入頁面。PDF檔名為 <code>mypdf.pdf</code>, 並存在 <code>media</code> 資料夾.</li>
+ <li>轉到YouTube或Google Maps這樣的共享網站，然後將影片或其他媒體項目嵌入頁面。</li>
+</ul>
+
+<p>T嘗試更新下面的程式碼以完成測驗：</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/media-embed/mediaembed3.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/tasks/media-embed/mediaembed3-download.html">下載此測驗的程式碼</a>在你自己的編輯器或線上編輯器中運行。</p>
+</div>
+
+<h2 id="評估或進一步幫助">評估或進一步幫助</h2>
+
+<p>您可以在上面的Interactive Editors中練習這些示例。</p>
+
+<p>如果您希望對自己的工作進行評估，或者遇到困難希望尋求幫助：</p>
+
+<ol>
+ <li>將您的工作放入在線共享編輯器中，例如 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 或 <a href="https://glitch.com/">Glitch</a>. 您可以自己編寫程式碼，也可以使用以上各節中連接到的初始文件。</li>
+ <li>撰寫帖子，要求評估和/或幫助 <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. 你的貼文應包括：
+  <ul>
+   <li>描述性標題，例如“ HTML圖像基礎知識1技能測試所需的評估”。</li>
+   <li>您已經嘗試過的內容以及您希望我們做什麼的詳細信息，例如如果您陷入困境並需要幫助，或者需要評估。</li>
+   <li>聯機共享編輯器中您要評估或需要幫助的示例的鏈接（如上面的步驟1中所述）。這是進入的好習慣-如果看不到他們的代碼，很難幫助有編碼問題的人。</li>
+   <li>指向實際任務或評估頁面的鏈接，因此我們可以找到您需要幫助的問題。</li>
+  </ul>
+ </li>
+</ol>
+
+<div id="gtx-trans" style="position: absolute; left: 34px; top: 1931px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/zh-tw/learn/html/multimedia_and_embedding/其他_嵌入_技術/index.html b/files/zh-tw/learn/html/multimedia_and_embedding/其他_嵌入_技術/index.html
new file mode 100644
index 0000000000..a1996f2537
--- /dev/null
+++ b/files/zh-tw/learn/html/multimedia_and_embedding/其他_嵌入_技術/index.html
@@ -0,0 +1,386 @@
+---
+title: 從物件到iframe - 其他嵌入技術
+slug: Learn/HTML/Multimedia_and_embedding/其他_嵌入_技術
+translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">到現在為止，您應該真正掌握了將內容嵌入網頁的方法，包括圖片，影片和聲音。在這一點上，我們想採取一些橫向的措施，尋找一些元素，使您可以將各種內容類型嵌入到網頁中： {{htmlelement("iframe")}}, {{htmlelement("embed")}} 和 {{htmlelement("object")}} 元素。<code>&lt;iframe&gt;</code>用於嵌入其他網頁，另外兩個用於嵌入PDF，SVG甚至是Flash（這項技術正在淘汰，但您仍會半定期看到）。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, familiarity with HTML fundamentals (as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>) and the previous articles in this module.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To learn how to embed items into web pages using {{htmlelement("object")}}, {{htmlelement("embed")}}, and {{htmlelement("iframe")}}, like Flash movies and other webpages.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A_short_history_of_embedding">A short history of embedding</h2>
+
+<p>A long time ago on the Web, it was popular to use <strong>frames</strong> to create websites — small parts of a website stored in individual HTML pages. These were embedded in a master document called a <strong>frameset</strong>, which allowed you to specify the area on the screen that each frame filled, rather like sizing the columns and rows of a table. These were considered the height of coolness in the mid to late 90s, and there was evidence that having a webpage split up into smaller chunks like this was better for download speeds — especially noticeable with network connections being so slow back then. They did however have many problems, which far outweighed any positives as network speeds got faster, so you don't see them being used anymore.</p>
+
+<p>A little while later (late 90s, early 2000s), plugin technologies became very popular, such as <a href="/en-US/docs/Glossary/Java">Java Applets</a> and <a href="/en-US/docs/Glossary/Adobe_Flash">Flash</a> — these allowed web developers to embed rich content into webpages such as videos and animations, which just weren't available through HTML alone. Embedding these technologies was achieved through elements like {{htmlelement("object")}}, and the lesser-used {{htmlelement("embed")}}, and they were very useful at the time. They have since fallen out of fashion due to many problems, including accessibility, security, file size, and more; these days most mobile devices don't support such plugins anymore, and desktop support is on the way out.</p>
+
+<p>Finally, the {{htmlelement("iframe")}} element appeared (along with other ways of embedding content, such as {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc.) This provides a way to embed an entire web document inside another one, as if it were an {{htmlelement("img")}} or other such element, and is used regularly today.</p>
+
+<p>With the history lesson out of the way, let's move on and see how to use some of these.</p>
+
+<h2 id="Active_learning_classic_embedding_uses">Active learning: classic embedding uses</h2>
+
+<p>In this article we are going to jump straight into an active learning section, to immediately give you a real idea of just what embedding technologies are useful for. The online world is very familiar with <a href="https://www.youtube.com">Youtube</a>, but many people don't know about some of the sharing facilities it has available. Let's look at how Youtube allows us to embed a video in any page we like using an {{htmlelement("iframe")}}.</p>
+
+<ol>
+ <li>First, go to Youtube and find a video you like.</li>
+ <li>Below the video, you'll find a <em>Share</em> button — select this to display the sharing options.</li>
+ <li>Select the <em>Embed</em> button and you'll be given some <code>&lt;iframe&gt;</code> code — copy this.</li>
+ <li>Insert it into the <em>Input</em> box below, and see what the result is in the <em>Output</em>.</li>
+</ol>
+
+<p>For bonus points, you could also try embedding a <a href="https://www.google.com/maps/">Google Map</a> in the example:</p>
+
+<ol>
+ <li>Go to Google Maps and find a map you like.</li>
+ <li>Click on the "Hamburger Menu" (three horizontal lines) in the top left of the UI.</li>
+ <li>Select the <em>Share or embed map</em> option.</li>
+ <li>Select the Embed map option, which will give you some <code>&lt;iframe&gt;</code> code — copy this.</li>
+ <li>Insert it into the <em>Input</em> box below, and see what the result is in the <em>Output</em>.</li>
+</ol>
+
+<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see an answer.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 250px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="width: 95%;min-height: 100px;"&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+const output = document.querySelector('.output');
+let code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+const htmlSolution = '&lt;iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen&gt;\n&lt;/iframe&gt;\n\n&lt;iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen&gt;\n&lt;/iframe&gt;';
+let solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  const scrollPos = textarea.scrollTop;
+  const caretPos = textarea.selectionStart;
+
+  const front = (textarea.value).substring(0, caretPos);
+  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Iframes_in_detail">Iframes in detail</h2>
+
+<p>So, that was easy and fun, right? {{htmlelement("iframe")}} elements are designed to allow you to embed other web documents into the current document. This is great for incorporating third-party content into your website that you might not have direct control over and don't want to have to implement your own version of — such as video from online video providers, commenting systems like <a href="https://disqus.com/">Disqus</a>, maps from online map providers, advertising banners, etc. The live editable examples you've been using through this course are implemented using <code>&lt;iframe&gt;</code>s.</p>
+
+<p>There are some serious {{anch("Security concerns")}} to consider with <code>&lt;iframe&gt;</code>s, as we'll discuss below, but this doesn't mean that you shouldn't use them in your websites — it just requires some knowledge and careful thinking. Let's explore the code in a bit more detail. Say you wanted to include the MDN glossary on one of your web pages — you could try something like this:</p>
+
+<pre class="notranslate">&lt;iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
+        width="100%" height="500" frameborder="0"
+        allowfullscreen sandbox&gt;
+  &lt;p&gt;
+    &lt;a href="https://developer.mozilla.org/en-US/docs/Glossary"&gt;
+       Fallback link for browsers that don't support iframes
+    &lt;/a&gt;
+  &lt;/p&gt;
+&lt;/iframe&gt;</pre>
+
+<p>This example includes the basic essentials needed to use an <code>&lt;iframe&gt;</code>:</p>
+
+<dl>
+ <dt>{{htmlattrxref('allowfullscreen','iframe')}}</dt>
+ <dd>If set, the <code>&lt;iframe&gt;</code> is able to be placed in fullscreen mode using the <a href="/en-US/docs/Web/API/Fullscreen_API">Full Screen API</a> (somewhat beyond scope for this article.)</dd>
+ <dt>{{htmlattrxref('frameborder','iframe')}}</dt>
+ <dd>If set to 1, this tells the browser to draw a border between this frame and other frames, which is the default behaviour. 0 removes the border. Using this isn't really recommended any more, as the same effect can be better achieved using {{cssxref('border')}}<code>: none;</code> in your {{Glossary('CSS')}}.</dd>
+ <dt>{{htmlattrxref('src','iframe')}}</dt>
+ <dd>This attribute, as with {{htmlelement("video")}}/{{htmlelement("img")}}, contains a path pointing to the URL of the document to be embedded.</dd>
+ <dt>{{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}</dt>
+ <dd>These attributes specify the width and height you want the iframe to be.</dd>
+ <dt><strong>F</strong>allback content</dt>
+ <dd>In the same way as other similar elements like {{htmlelement("video")}}, you can include fallback content between the opening and closing <code>&lt;iframe&gt;&lt;/iframe&gt;</code> tags that will appear if the browser doesn't support the <code>&lt;iframe&gt;</code>. In this case, we have included a link to the page instead. It is unlikely that you'll come across any browser that doesn't support <code>&lt;iframe&gt;</code>s these days.</dd>
+ <dt>{{htmlattrxref('sandbox','iframe')}}</dt>
+ <dd>This attribute, which works in slightly more modern browsers than the rest of the <code>&lt;iframe&gt;</code> features (e.g. IE 10 and above) requests heightened security settings; we'll say more about this in the next section.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: In order to improve speed, it's a good idea to set the iframe's <code>src</code> attribute with JavaScript after the main content is done with loading. This makes your page usable sooner and decreases your official page load time (an important {{glossary("SEO")}} metric.)</p>
+</div>
+
+<h3 id="Security_concerns">Security concerns</h3>
+
+<p>Above we mentioned security concerns — let's go into this in a bit more detail now. We are not expecting you to understand all of this content perfectly the first time; we just want to make you aware of this concern, and provide a reference to come back to as you get more experienced and start considering using <code>&lt;iframe&gt;</code>s in your experiments and work. Also, there is no need to be scared and not use <code>&lt;iframe&gt;</code>s — you just need to be careful. Read on...</p>
+
+<p>Browser makers and Web developers have learned the hard way that iframes are a common target (official term: <strong>attack vector</strong>) for bad people on the Web (often termed <strong>hackers</strong>, or more accurately, <strong>crackers</strong>) to attack if they are trying to maliciously modify your webpage, or trick people into doing something they don't want to do, such as reveal sensitive information like usernames and passwords. Because of this, spec engineers and browser developers have developed various security mechanisms for making <code>&lt;iframe&gt;</code>s more secure, and there are also best practices to consider — we'll cover some of these below.</p>
+
+<div class="note">
+<p>{{interwiki('wikipedia','Clickjacking')}} is one kind of common iframe attack where hackers embed an invisible iframe into your document (or embed your document into their own malicious website) and use it to capture users' interactions. This is a common way to mislead users or steal sensitive data.</p>
+</div>
+
+<p>A quick example first though — try loading the previous example we showed above into your browser — you can <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">find it live on Github</a> (<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">see the source code</a> too.) You won't actually see anything displayed on the page, and if you look at the <em>Console</em> in the <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a>, you'll see a message telling you why. In Firefox, you'll get told <em>Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing</em>. This is because the developers that built MDN have included a setting on the server that serves the website pages to disallow them from being embedded inside <code>&lt;iframe&gt;</code>s (see {{anch("Configure CSP directives")}}, below.) This makes sense — an entire MDN page doesn't really make sense to be embedded in other pages unless you want to do something like embed them on your site and claim them as your own — or attempt to steal data via clickjacking, which are both really bad things to do. Plus if everybody started to do this, all the additional bandwidth would start to cost Mozilla a lot of money.</p>
+
+<h4 id="Only_embed_when_necessary">Only embed when necessary</h4>
+
+<p>Sometimes it makes sense to embed third-party content — like youtube videos and maps — but you can save yourself a lot of headaches if you only embed third-party content when completely necessary. A good rule of thumb for web security is <em>"You can never be too cautious. If you made it, double-check it anyway. If someone else made it, assume it's dangerous until proven otherwise."</em></p>
+
+<div>
+<p>Besides security, you should also be aware of intellectual property issues. Most content is copyrighted, offline and online, even content you might not expect (for example, most images on <a href="https://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>). Never display content on your webpage unless you own it or the owners have given you written, unequivocal permission. Penalties for copyright infringement are severe. Again, you can never be too cautious.</p>
+
+<p>If the content is licensed, you must obey the license terms. For example, the content on MDN is <a href="/en-US/docs/MDN/About#Copyrights_and_licenses">licensed under CC-BY-SA</a>. That means, you must <a href="https://wiki.creativecommons.org/wiki/Best_practices_for_attribution">credit us properly</a> when you quote our content, even if you make substantial changes.</p>
+</div>
+
+<h4 id="Use_HTTPS">Use HTTPS</h4>
+
+<p>{{Glossary("HTTPS")}} is the encrypted version of {{Glossary("HTTP")}}. You should serve your websites using HTTPS whenever possible:</p>
+
+<ol>
+ <li>HTTPS reduces the chance that remote content has been tampered with in transit,</li>
+ <li>HTTPS prevents embedded content from accessing content in your parent document, and vice versa.</li>
+</ol>
+
+<p>Using HTTPS requires a security certificate, which can be expensive (although <a href="https://letsencrypt.org/">Let's Encrypt</a> makes things easier) — if you can't get one, you may serve your parent document with HTTP. However, because of the second benefit of HTTPS above, <em>no matter what the cost, you must never embed third-party content with HTTP. </em>(In the best case scenario, your user's Web browser will give them a scary warning.) All reputable companies that make content available for embedding via an <code>&lt;iframe&gt;</code> will make it available via HTTPS — look at the URLs inside the <code>&lt;iframe&gt;</code> <code>src</code> attribute when you are embedding content from Google Maps or Youtube, for example.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> allow content to be served via HTTPS by default, so is useful for hosting content. If you are using different hosting and are not sure, ask your hosting provider about it.</p>
+</div>
+
+<h4 id="Always_use_the_sandbox_attribute">Always use the <code>sandbox</code> attribute</h4>
+
+<p>You want to give attackers as little power as you can to do bad things on your website, therefore you should give embedded content <em>only the permissions needed for doing its job. </em>Of course, this applies to your own content, too. A container for code where it can be used appropriately — or for testing — but can't cause any harm to the rest of the codebase (either accidental or malicious) is called a <a href="https://en.wikipedia.org/wiki/Sandbox_(computer_security)">sandbox</a>.</p>
+
+<p>Unsandboxed content can do way too much (executing JavaScript, submitting forms, popup windows, etc.) By default, you should impose all available restrictions by using the <code>sandbox</code> attribute with no parameters, as shown in our previous example.</p>
+
+<p>If absolutely required, you can add permissions back one by one (inside the <code>sandbox=""</code> attribute value) — see the {{htmlattrxref('sandbox','iframe')}} reference entry for all the available options. One important note is that you should <em>never</em> add both <code>allow-scripts</code> and <code>allow-same-origin</code> to your <code>sandbox</code> attribute — in that case, the embedded content could bypass the <a href="/en-US/docs/Glossary/Same-origin_policy">Same-origin policy</a> that stops sites from executing scripts, and use JavaScript to turn off sandboxing altogether.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Sandboxing provides no protection if attackers can fool people into visiting malicious content directly (outside an <code>iframe</code>). If there's any chance that certain content may be malicious (e.g., user-generated content), please serve it from a different {{glossary("domain")}} to your main site.</p>
+</div>
+
+<h4 id="Configure_CSP_directives">Configure CSP directives</h4>
+
+<p>{{Glossary("CSP")}} stands for <strong><a href="/en-US/docs/Web/Security/CSP">content security policy</a></strong> and provides <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">a set of HTTP Headers</a> (metadata sent along with your web pages when they are served from a web server) designed to improve the security of your HTML document. When it comes to securing <code>&lt;iframe&gt;</code>s, you can <em><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options">configure your server to send an appropriate <code>X-Frame-Options</code>  header.</a></em> This can prevent other websites from embedding your content in their web pages (which would enable {{interwiki('wikipedia','clickjacking')}} and a host of other attacks), which is exactly what the MDN developers have done, as we saw earlier on.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can read Frederik Braun's post <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">On the X-Frame-Options Security Header</a> for more background information on this topic. Obviously, it's rather out of scope for a full explanation in this article.</p>
+</div>
+
+<h2 id="The_&lt;embed>_and_&lt;object>_elements">The &lt;embed&gt; and &lt;object&gt; elements</h2>
+
+<p>The {{htmlelement("embed")}} and {{htmlelement("object")}} elements serve a different function to {{htmlelement("iframe")}} — these elements are general purpose embedding tools for embedding multiple types of external content, which include plugin technologies like Java Applets and Flash, PDF (which can be shown in a browser with a PDF plugin), and even content like videos, SVG and images!</p>
+
+<div class="note">
+<p><strong>Note</strong>: A <strong>plugin</strong>, in this context, refers to software that provides access to content the browser cannot read natively.</p>
+</div>
+
+<p>However, you are unlikely to use these elements very much — Applets haven't been used for years, Flash is no longer very popular, due to a number of reasons (see {{anch("The case against plugins")}}, below), PDFs tend to be better linked to than embedded, and other content such as images and video have much better, easier elements to handle those. Plugins and these embedding methods are really a legacy technology, and we are mainly mentioning them in case you come across them in certain circumstances like intranets, or enterprise projects.</p>
+
+<p>If you find yourself needing to embed plugin content, this is the kind of information you'll need, at a minimum:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"></th>
+   <th scope="col">{{htmlelement("embed")}}</th>
+   <th scope="col">{{htmlelement("object")}}</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{glossary("URL")}} of the embedded content</td>
+   <td>{{htmlattrxref('src','embed')}}</td>
+   <td>{{htmlattrxref('data','object')}}</td>
+  </tr>
+  <tr>
+   <td><em>accurate </em>{{glossary("MIME type", 'media type')}} of the embedded content</td>
+   <td>{{htmlattrxref('type','embed')}}</td>
+   <td>{{htmlattrxref('type','object')}}</td>
+  </tr>
+  <tr>
+   <td>height and width (in CSS pixels) of the box controlled by the plugin</td>
+   <td>{{htmlattrxref('height','embed')}}<br>
+    {{htmlattrxref('width','embed')}}</td>
+   <td>{{htmlattrxref('height','object')}}<br>
+    {{htmlattrxref('width','object')}}</td>
+  </tr>
+  <tr>
+   <td>names and values, to feed the plugin as parameters</td>
+   <td>ad hoc attributes with those names and values</td>
+   <td>single-tag {{htmlelement("param")}} elements, contained within <code>&lt;object&gt;</code></td>
+  </tr>
+  <tr>
+   <td>independent HTML content as fallback for an unavailable resource</td>
+   <td>not supported (<code>&lt;noembed&gt;</code> is obsolete)</td>
+   <td>contained within <code>&lt;object&gt;</code>, after <code>&lt;param&gt;</code> elements</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: <code>&lt;object&gt;</code> requires a <code>data</code> attribute, a <code>type</code> attribute, or both. If you use both, you may also use the {{htmlattrxref('typemustmatch','object')}} attribute (only implemented in Firefox and Chrome, as of this writing). <code>typemustmatch</code> keeps the embedded file from running unless the <code>type</code> attribute provides the correct media type. <code>typemustmatch</code> can therefore confer significant security benefits when you're embedding content from a different {{glossary("origin")}} (it can keep attackers from running arbitrary scripts through the plugin).</p>
+</div>
+
+<p>Here's an example that uses the {{htmlelement("embed")}} element to embed a Flash movie (see this <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">live on Github</a>, and <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">check the source code</a> too):</p>
+
+<pre class="brush: html notranslate">&lt;embed src="whoosh.swf" quality="medium"
+       bgcolor="#ffffff" width="550" height="400"
+       name="whoosh" align="middle" allowScriptAccess="sameDomain"
+       allowFullScreen="false" type="application/x-shockwave-flash"
+       pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;</pre>
+
+<p>Pretty horrible, isn't it? The HTML generated by the Adobe Flash tool tended to be even worse, using an <code>&lt;object&gt;</code> element with an <code>&lt;embed&gt;</code> element embedded in it, to cover all bases (check out an example.) Flash was even used successfully as fallback content for HTML5 video, for a time, but this is increasingly being seen as not necessary.</p>
+
+<p>Now let's look at an <code>&lt;object&gt;</code> example that embeds a PDF into a page (see the <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">live example</a> and the <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">source code</a>):</p>
+
+<pre class="brush: html notranslate">&lt;object data="mypdf.pdf" type="application/pdf"
+        width="800" height="1200" typemustmatch&gt;
+  &lt;p&gt;You don't have a PDF plugin, but you can
+    &lt;a href="mypdf.pdf"&gt;download the PDF file.
+    &lt;/a&gt;
+  &lt;/p&gt;
+&lt;/object&gt;</pre>
+
+<p>PDFs were a necessary stepping stone between paper and digital, but they pose many <a href="http://webaim.org/techniques/acrobat/acrobat">accessibility challenges</a> and can be hard to read on small screens. They do still tend to be popular in some circles, but it is much better to link to them so they can be downloaded or read on a separate page, rather than embedding them in a webpage.</p>
+
+<h3 id="The_case_against_plugins">The case against plugins</h3>
+
+<p>Once upon a time, plugins were indispensable on the Web. Remember the days when you had to install Adobe Flash Player just to watch a movie online? And then you constantly got annoying alerts about updating Flash Player and your Java Runtime Environment. Web technologies have since grown much more robust, and those days are over. For virtually all applications, it's time to stop delivering content that depends on plugins and start taking advantage of Web technologies instead.</p>
+
+<ul>
+ <li><strong>Broaden your reach to everyone. </strong>Everyone has a browser, but plugins are increasingly rare, especially among mobile users. Since the Web is easily used without any plugins, people would rather just go to your competitors' websites than install a plugin.</li>
+ <li><strong>Give yourself a break from the <a href="https://webaim.org/techniques/flash/">extra accessibility headaches </a>that come with Flash and other plugins.</strong></li>
+ <li><strong>Stay clear of additional security hazards. </strong>Adobe Flash is <a href="https://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">notoriously insecure,</a> even after countless patches. In 2015, Alex Stamos, then-Chief Security Officer at Facebook,  <a href="https://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso">requested that Adobe discontinue Flash.</a></li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note: </strong>Due to its inherent issues and the lack of support for Flash, Adobe announced that they would stop supporting it at the end of 2020.  As of January 2020, most browsers block Flash content by default, and by December 31st of 2020, all browsers will have completly removed all Flash functionality. Any existing Flash content will be inaccessable after that date.</p>
+</div>
+
+<p>So what should you do? If you need interactivity, HTML and {{glossary("JavaScript")}} can readily get the job done for you with no need for Java applets or outdated ActiveX/BHO technology. Instead of relying on Adobe Flash, you should use <a href="/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">HTML5 video</a> for your media needs, <a href="/en-US/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">SVG</a> for vector graphics, and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas</a> for complex images and animations. <a href="https://plus.google.com/+PeterElst/posts/P5t4pFhptvp">Peter Elst was already writing some years ago</a> that Adobe Flash is rarely the right tool for the job. As for ActiveX, even Microsoft's {{glossary("Microsoft Edge","Edge")}} browser no longer supports it.</p>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding">Test your skills: Multimedia and embedding</a>.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The topic of embedding other content in web documents can quickly become very complex, so in this article, we've tried to introduce it in a simple, familiar way that will immediately seem relevant, while still hinting at some of the more advanced features of the involved technologies. To start with, you are unlikely to use embedding for much beyond including third-party content like maps and videos on your pages. As you become more experienced, however, you are likely to start finding more uses for them.</p>
+
+<p>There are many other technologies that involve embedding external content besides the ones we discussed here. We saw some in earlier articles, such as {{htmlelement("video")}}, {{htmlelement("audio")}}, and {{htmlelement("img")}}, but there are others to discover, such as {{htmlelement("canvas")}} for JavaScript-generated 2D and 3D graphics, and {{SVGElement("svg")}} for embedding vector graphics. We'll look at <a href="/en-US/docs/Web/SVG">SVG</a> in the next article of the module.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>