測試你的技能:多媒體和嵌入

這項技能測試的目的是評估你是否了解我們的視訊和音訊內容 (en-US)以及從物件到 iframe 的其他嵌入技術 (en-US)文章。

備註: 你可以在下面的交互式編輯器中嘗試解決方案,但是下載代碼並使用在線工具如 CodePen, jsFiddle, or Glitch 去完成測試。

如果你遇到困難,請向我們尋求幫助-請參閱 評估或進一步幫助 此頁面底部的部分。

多媒體和嵌入 1

在此測試中,我們希望你將一個簡單的音檔嵌入到頁面上。你需要:

  • 將音頻文件的路徑添加到適當的屬性,以將其嵌入頁面中。音檔名為audio.mp3,位於當前文件夾中的文件夾media中。
  • 添加屬性讓瀏覽器顯示一些預設控制選項。
  • 為不支持的音檔撥放的瀏覽器添加一些適當的備註。

嘗試更新下面的程式碼以完成測驗:

備註: 下載此測驗的程式碼在你自己的編輯器或線上編輯器中運行。

多媒體和嵌入 2

在此測驗中,我們希望你標記一個稍微複雜一些的影片播放器,此外還具有多個來源、字幕和其他功能。你需要:

  • 添加屬性以使瀏覽器顯示一些預設控制選項。
  • 為不支持的影片撥放的瀏覽器添加一些適當的備註。
  • 添加多個源,其中包含視頻文件的路徑。這些文件稱為 video.mp4video.webm, 並且位於一個名為media的文件夾中。
  • 讓瀏覽器提前知道影片來源的影片格式,以便可以提前選擇要下載的影片。
  • 給予 <video> 寬度和高度等於固定大小(320 x 240 像素)。
  • 使影片默認為靜音。
  • 顯示包含在 media 資料夾, 在一個名為 subtitles_en.vtt, 播放視頻時,你必須將類型明確設置為字幕,並且字幕語言為英語。

嘗試更新下面的程式碼以完成測驗:

備註: 下載此測驗的程式碼在你自己的編輯器或線上編輯器中運行。

多媒體和嵌入 3

對於此最終測驗,你需要執行兩個測驗:

  • 將 PDF 嵌入頁面。PDF 檔名為 mypdf.pdf, 並存在 media 資料夾.
  • 轉到 YouTube 或 Google Maps 這樣的共享網站,然後將影片或其他媒體項目嵌入頁面。

T 嘗試更新下面的程式碼以完成測驗:

備註: 下載此測驗的程式碼在你自己的編輯器或線上編輯器中運行。

評估或進一步幫助

你可以在上面的 Interactive Editors 中練習這些示例。

如果你希望對自己的工作進行評估,或者遇到困難希望尋求幫助:

  1. 將你的工作放入在線共享編輯器中,例如 CodePen, jsFiddle, 或 Glitch. 你可以自己編寫程式碼,也可以使用以上各節中連接到的初始文件。
  2. 撰寫帖子,要求評估和/或幫助 MDN Discourse forum Learning category. 你的貼文應包括:
    • 描述性標題,例如「 HTML 圖像基礎知識 1 技能測試所需的評估」。
    • 你已經嘗試過的內容以及你希望我們做什麼的詳細信息,例如如果你陷入困境並需要幫助,或者需要評估。
    • 聯機共享編輯器中你要評估或需要幫助的示例的鏈接(如上面的步驟 1 中所述)。這是進入的好習慣-如果看不到他們的代碼,很難幫助有編碼問題的人。
    • 指向實際任務或評估頁面的鏈接,因此我們可以找到你需要幫助的問題。