HTML-多媒體與嵌入

查看更多學習筆記：GitHub：LoveEmiliaForever
MDN中文官網

HTML-中的圖片

將圖片放入網頁

可以使用<img/>來將圖片嵌入網頁，它是一個空元素，最少只需src屬性即可工作

    <img src="圖片鏈接" alt="備選文本" width="數字" height="數字" title="圖片的題目">

src指向圖片資源的地址，是<img/>正常工作必不可少的屬性

??除非有必要，否則永遠不要把src指向其它網站上的圖片，這被稱之為盜鏈，如果這樣做，你會占用他人帶寬，可能降低你的頁面加載速度，圖片將不受你的控制可能被替換

?像是<img/>和<video/>這樣的元素有時被稱之為替換元素，因為它們的內容和尺寸由外部資源決定，而非元素本身

alt屬性的屬性值稱之為備選文本，它應該是用于描述圖片的文本
備選文本會在圖片加載出錯時被展示出來，會被搜索引擎所檢索，能夠用在一些特殊應用場景

?備選文本的關鍵是保證網頁在無法加載圖片時的使用

可以給<img/>添加width和height屬性以指定它的寬高，但是這樣的方法不好
如果要改變圖片在網頁顯示的尺寸應該使用CSS而非HTML

使用title可以給圖片添加標題，圖片標題通常會在鼠標懸停時出現
不要把重要信息放置其中，title屬性的重要性較小

打包圖片和其相關元素

有時，我們希望給圖片一個解說，并通常使用<p>創(chuàng)建解說
但問題是，從語義的角度看，<img/>和<p>并沒有什么關聯(lián)，這可能造成一些問題
此時，可以使用<figure>和<figcaption>元素打包圖片和圖片相關的元素

    <figure>
        <img src="圖片地址" alt="備選文本">
        <figcaption>對圖片的解釋介紹</figcaption>
    </figure>

其中<figure>可以把一些元素打包成一個整體，<figcaption>則是用來給圖片添加描述的

并且<figure>不一定只是用來打包圖片的，也可以用來打包其它東西

• 用簡潔、易懂的方式表達意圖
• 可以放在頁面的某處
• 為主要內容提供重要的補充說明

因此，<figure>可以是幾個圖片、一段代碼、音視頻、方程、表格之類的

CSS放置圖片和HTML放置圖片的區(qū)別

主要的區(qū)別是語義方面的，也就是說圖片有沒有意義
如果圖片是用來裝飾或干什么的，使用 CSS 更好，如果圖片是有意義的使用 HTML 更好

HTML-中的音視頻

在HTML5中出現了<video>和<audio>標簽，還有一些API對它們進行控制

<video>標簽

<video>標簽可以插入視頻到網頁之中

    <video src="視頻地址" controls>
        <p>后備內容</p>
    </video>

• src屬性
  • 指向你想要嵌入的視頻的地址
• controls屬性
  • 用戶在觀看視頻時會需要對視頻進行操作，controls意味著添加瀏覽器默認視頻控制界面
  • 同時，也可以使用JS來根據API構建自定義的控制界面
• <video>的內容
  • 它的內容叫做后備內容，當瀏覽器不支持<video>時就會顯示這段內容
  • 這是出于兼容性考慮的設計

設置多個播放源

音視頻的格式

視頻文件是有多種格式的，常見的如MP3、MP4、WebM
他們定義了音頻軌道和視頻軌道的儲存結構，其中還包含描述這個媒體文件的元數據，以及用于編碼的編碼譯碼器等等

一個WebM格式的視頻文件如下所示，它包含音頻軌道、視頻軌道、文本軌道

其中的音頻軌道以音頻編解碼器進行操作，視頻軌道以視頻編解碼器進行操作

• WebM格式，在所有現代瀏覽器都支持，除了老版本
• MP4格式，包括IE在內的所有現代瀏覽器都支持
• Ogg格式，Firefox和Chrome支持，但它已經被WebM取代

音頻文件則簡單許多，只有一個音軌
常見的音頻文件有MP3、FLAC、Ogg

多種格式的播放源

由于MP4是存在版權要收費的，因此有其它的開源視頻格式
瀏覽器內會有各種解碼器，但是不同的瀏覽器擁有的解碼器并不完全相同
因此要準備多種視頻格式

    <video controls>
        <source src="MP4視頻格式" type="video/mp4">
        <source src="WebM視頻格式" type="video/webm">
        <p>備選文本</p>
    </video>

設置多個播放源時，移除了<video>的src屬性，然后將<source/>包括在<video>之中以提供源地址信息
在<source/>中有type屬性，是用來說明源的格式的
有了type后瀏覽器識別視頻格式會快很多，否則就要一個個加載，一個個嘗試

其它<video>特性

<video>還擁有其它很多的實用屬性，如下所示

    <video controls width="400" height="400"
        autoplay loop muted
        poster="poster.png">
        <source src="MP4文件地址" type="video/mp4">
        <source src="WebM文件地址" type="video/webm">
        <p>備選文本</p>
    </video>

• width="數字"和height="數字"
  • 可以用此屬性控制視頻尺寸，也可以用 CSS 控制視頻尺寸
  • 無論怎么設置高寬，視頻都會保持原來的長寬比，而超出部分以黑邊填充
• autoplay
  • 這個屬性會使得音視頻自動播放，即使其余部分沒有加載完
  • 盡量不要使用這個屬性，用戶會反感，某些瀏覽器會禁用自動播放
• loop
  • 讓音頻或視頻循環(huán)播放，同樣不建議使用
• muted
  • 他會讓媒體靜音
• poster="圖片地址"
  • 當視頻沒有播放時，它會給視頻一個封面
• preload="下列選項"用來緩沖較大的文件
  • "none"：不緩沖
  • "auto"：頁面加載后緩沖媒體文件
  • "metadata"：只緩沖媒體文件的元數據

<audio>標簽

<audio>和<video>使用方法很相似，只有一些地方不同

    <audio controls>
        <source src="MP3音頻地址" type="audio/mp3">
        <source src="Ogg音頻地址" type="audio/ogg">
        <p>備選文本</p>
    </audio>

• 不支持width和height標簽，沒有可視化部件
• 不支持poster，同樣沒有可視化部件

用 JS 控制媒體

可以在 JS 中使用load()方法來重置媒體，也就是重新加載播放

通過監(jiān)聽HTMLMediaElement.audioTracks對象的addtrack事件，可以使用 JS 對音軌的增加做出響應

    const mediaElem = document.getElementById("my-media-element");
    mediaElem.load();

    const mediaElem = document.querySelector("video");
    mediaElem.audioTracks.onaddtrack = function(event) {
    audioTrackAdded(event.track);
    }

給聲音添加字幕

在 HTML5 中可以給<audio>或<video>添加<track>進而引入字幕文件

字幕文件是使用WebVTT格式編寫的，并有如下類型

• subtitles：字幕類型，如翻譯字幕等
• captions：也是字幕，但一般是同步翻譯對白、描述一些重要信息聲音
• timed descriptions：文字轉為音頻，服務有視覺障礙的人

一個WebVY文件

    WEBVTT

    1
    00:00:22.230 --> 00:00:24.606
    第一段字幕

    2
    00:00:30.739 --> 00:00:34.074
    第二段

    ...

可以在<video>或<audio>引入<track>標簽，<track>要放在所有的<source>后面

    <video controls>
        <source src="example.mp4" type="video/mp4">
        <source src="example.webm" type="video/webm">
        <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
    </video>

其中<track>標簽有三個屬性kind、src、srclang

• kind屬性用來指明字幕的類型，可以有subtitles、captions、descriptions三種類型
• src用來指明字幕文件路徑
• srclang指明字幕的語言類型

?添加文本軌道還有利于SEO

object、iframe等其它嵌入技術

<iframe>詳解

iframe使用

<iframe>元素可以讓你將其它的web文檔嵌入到當前文檔中，這很適合將第三方內容嵌入網站內
但它有一些嚴重的安全隱患要考慮，需要謹慎設置

    <iframe src="目標地址"
            width="100%" height="500" frameborder="0"
            allowfullscreen sandbox>
    <p>備選文本</p>
    </iframe>

• allowfullscreen：允許<iframe>通過全屏API設置為全屏模式
• frameborder：默認情況為1繪制邊框，設置為0刪除邊框，應該使用CSS設置border:none
• src：指向要嵌入文檔的地址
• width和height：和其它標簽一樣
• sandbox：沙盒模式，能夠提高安全性

?為了提高速度，在主內容完成加載后，使用 JavaScript 設置<iframe>的src屬性更好

安全隱患

雖然<iframe>是有安全隱患的，但只需要謹慎和完善的設置就能夠使用它

網絡的黑客(hacker)常將iframe作為攻擊目標，或稱為攻擊向量¹

預防方法如下所示

1. 只在必要時嵌入第三方內容，這樣會免去許多麻煩
2. 使用HTTPS為網站提供服務，絕對不能使用HTTP嵌入第三方內容
   • HTTPS減少了遠程內容在傳輸過程中被篡改的機會
   • HTTPS防止嵌入式內容訪問你的父文檔和子文檔的內容
3. 始終使用sandbox屬性
   • sandbox屬性可以給嵌入的內容自動指定最低限度的權限
   • 使用sandbox=""設置權限
   • 永遠不要同時添加allow-scripts和allow-same-origin到sandbox屬性值內
4. 配置CSP指令
   • CSP代表內容安全策略，它提供一組HTTP標頭，旨在提高HTML文檔安全性
   • 可以配置服務器，以防止其它網站嵌入你的網站內容配置X-Frame-Options

<embed>和<object>

這兩個標簽時用來嵌入多種類型外部內容的通用嵌入工具
例如嵌入Java小程序、Flash、PDF、視頻、SVG、圖像等等

然而它們已經老了，因此了解一下以防遇到它們是不知道是干什么用的

其它的嵌入標簽

其它還有一些HTML5的嵌入標簽
<canvas>用于 JS 生成的 2D 和 3D 圖形
<svg> 用于嵌入矢量圖形

嵌入矢量圖形

什么是矢量圖形

網絡上主要有兩種類型的圖片

• 像素圖：包含的是像素位置和像素顏色等信息，放大會像素化
• 矢量圖：包含了圖形和路徑的定義，是使用算法計算出圖形的圖片，放大照樣清晰

什么是SVG

SVG是用于描述矢量圖像的XML語言，它基本上是像 HTML 一樣的標記，只是你有許多不同的元素來定義要顯示在圖像中的形狀，以及要應用于這些形狀的效果

    <svg version="1.1"
        baseProfile="full"
        width="300" height="200"
        xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" fill="black" />
    <circle cx="150" cy="100" r="90" fill="blue" />
    </svg>

上面的代碼將展示如下圖案

雖然可以通過手動編寫簡單SVG，但遇到復雜圖形時還是使用像inkscape、illustrator這樣的編輯器更好

添加SVG到頁面

使用<img>添加SVG

    <img
        src="svg圖像地址"
        alt="備選文本"
        height="高"
        width="寬" />

在HTML中引入SVG代碼

    <svg width="300" height="200">
        <rect width="100%" height="100%" fill="green" />
    </svg>

直接打開SVG并復制它的代碼到HTML中，這稱為SVG內聯(lián)

使用<iframe>嵌入SVG

    <iframe src="triangle.svg" width="500" height="500" sandbox>
        <img src="triangle.png" alt="Triangle with three unequal sides" />
    </iframe>

這不是個好方法，如果瀏覽器不支持<iframe>則會回退到備選文本，此外除非SVG和網頁同源，否則不能用js操作它

響應式圖片

為什么用響應式圖片

由于設備的不同，每個人的屏幕、分辨率都不一樣
同樣的圖片在不同設備上顯示的效果不同，有時會產生不理想的效果

即使響應式的改變圖片的大小，圖片仍然可能顯示出不理想的效果
因此，有如下解決方法

• 提供不同分辨率的圖像，以適配清晰度不同的屏幕，稱為分辨率切換問題
• 為不同的屏幕提供裁剪過后不同大小的圖片，以改進閱讀體驗，稱為美術設計問題

分辨率切換：不同尺寸

可以在<img>內添加srcset和sizes屬性來判斷應該使用什么圖片

<img
    srcset="圖片1地址 圖片1的寬度, 圖片2地址 圖片2的寬度"
    sizes="(max-width: 600px) 480px,
            800px"
    src="備選圖片地址"
    alt="備選文本" />

srcset屬性定義了一系列的圖片信息，每個圖片信息之間用,隔開，一個圖片信息包括

1. 圖片地址
2. 空格
3. 圖片的寬度，真實單位是像素但是寫出來的單位應該是w

sizes定義了一組媒體條件，當條件為真時選擇一個期望尺寸，每個條件之間同樣以,隔開

1. 一個媒體條件如(max-width:600px)視口寬度小于等于600px
2. 一個空格
3. 條件為真時，期望寬度大小

?示例中有一個沒有媒體條件的，那是使用在無匹配條件時的默認選項

在有了這些屬性后，瀏覽器會如下運行：

1. 檢查設備寬度
2. 檢查sizes列表真假值，并最終得到期望寬度大小
3. 加載srcset中最接近期望寬度大小的圖片

?如果在把瀏覽器寬度設置到最小時，沒有加載更小的圖，應該檢查一下此時的視口大小document.querySelector('html').clientWidth,不同瀏覽器可以縮小到的最小寬度不同，有時會超過這個最小寬度

?在<head>中存在這樣的元數據<meta name="viewport" content="width=device-width">,這行代碼會強制讓手機瀏覽器采用它們真實可視窗口的寬度來加載網頁，這樣才能使用響應式

分辨率切換：同尺寸，不同分辨率

結合srcset和x語法能夠讓瀏覽器選擇合適分辨率的圖片

    <img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
        src="elva-fairy-640w.jpg"
        alt="Elva dressed as a fairy" />

瀏覽器會計算出正在顯示的顯示器的分辨率，然后srcset引用的最適合的圖片，2x代表用兩個或更多設備像素表示一個顯示像素

美術設計

美術設計問題涉及到更改顯示的圖像以適應不同的顯示尺寸
分辨率切換是改圖像尺寸不改圖像內容，美術設計是改更改圖像內容、尺寸

    <picture>
        <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
        <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
        <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
    </picture>

<source>可以包含media、srcset、sizes、type
media和srcset不應該一起用，media應該用在美術設計時
type在<source>中起到的作用和在<video>起到的作用一樣，用于選擇合適的格式
任何情況下，都應該提供一個<img>作為備選圖片

    <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
    <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
    <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
</picture>

`<source>`可以包含`media`、`srcset`、`sizes`、`type`  
`media`和`srcset`不應該一起用，`media`應該用在美術設計時  
`type`在`<source>`中起到的作用和在`<video>`起到的作用一樣，用于選擇合適的格式  
任何情況下，都應該提供一個`<img>`作為備選圖片  

到了這里，關于HTML-多媒體嵌入-MDN文檔學習筆記的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！