audio標簽、HOVER效果、rgba和opacity、隱藏場景

HTML5的audio定義音頻流

HTML5里引入的新標記 <audio> 和 <video> 實現了HTML對視頻播放和音頻播放的原生支持，有了這種原生的HTML5視頻播放器/音頻播放器，我們不再需要flash技術，而直接能將視頻/音頻嵌入到了網頁中。

<audio> 和 <video> 兩個標記上控制屬性的含義：

• controls : 顯示標准的 HTML5 視頻/音頻播放器控制條、控制按鈕。
• autoplay : 讓文件自動播放。
• loop : 讓文件循環播放。

preload 屬性是用來緩存大體積文件的。它有三個可選值：

• "none" 不緩存
• "auto" 緩存
• "metadata" 只緩存文件元信息

為了能夠兼容各種瀏覽器對不同媒體類型的支持，我們可以用多個 <source> 元素來提供多個不同的媒體類型。

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>

持Ogg格式視頻流的瀏覽器可以播放 Ogg 文件。如果不支持，可以播放 MPEG-4 文件。

我們還可以指定播放使用的解碼器(codecs); 這樣就可以更精確的讓瀏覽器如何播放提供的視頻：

<video controls>
  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
  Your browser does not support the <code>video</code> element.
</video>

上面，我們指定了這個視頻需要使用 Dirac 和 Speex 解碼器。如果瀏覽器支持 Ogg 格式，但沒有指定的解碼器，那么，視頻將不會被加載。

如果沒有提供 type 屬性，則瀏覽器會向服務器詢問媒體類型，看看是否支持；如果不支持，瀏覽器將會去檢查下一個 source 屬性

用JavaScript控制視頻/音頻播放

用JavaScript可控制HTML5視頻播放器實現播放、暫停、快進，快退、音量等。

<audio id="demo" src="audio.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo').play()">播放</button>
  <button onclick="document.getElementById('demo').pause()">暫停</button>
  <button onclick="document.getElementById('demo').volume+=0.1">降低音量</button>
  <button onclick="document.getElementById('demo').volume-=0.1">提高音量</button>
</div> 

停止下載視頻文件

雖然我們可以使用pause()方法里讓視頻文件停止播放，但瀏覽器並未停止下載媒體文件，除非它達到了一定的緩存量。

下面是讓瀏覽器如何停止下載視頻文件的方法：

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//或
mediaElement.removeAttribute("src");

通過刪除 src 屬性(或者設置為空值)，這樣就能停止文件的網絡下載。

設定播放的時間點定位

我們可以指定視頻從某時某分某秒開始播放，這是通過設置 currentTime 屬性來實現。

我們可以通過 seekable 屬性來獲得視頻有效的播放時間范圍。它會返回一個 TimeRanges 對象，能夠告訴你有效的開始時間和結束時間。

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start(0);  // 返回開始時間 (秒)
mediaElement.seekable.end(0);    // 返回結束時間 (秒)
mediaElement.currentTime = 122; // 定位到第 122 秒播放
mediaElement.played.end(0);      // 返回已經播放的時間長度(秒)

---

:hover

:hover CSS偽類適用於用戶使用指示設備虛指一個元素（沒有激活它）的情況。這個樣式會被任何與鏈接相關的偽類重寫，像:link, :visited, 和 :active等。為了確保生效，:hover規則需要放在:link和:visited規則之后，但是在:active規則之前

:hover偽類可以任何偽元素上使用

但是需要注意: 在觸摸屏上 :hover 有問題，基本不可用。不同的瀏覽器上:hover 偽類表現不同。 可能從不會觸發；或者在觸摸某元素后觸發了一小會兒；或者總是觸發即使用戶不在觸摸了，直到用戶觸摸別的元素。

CSS半透明效果的屬性和場景

在CSS中與半透明效果相關的屬性有兩個：opacity和rgba。

opacity屬性的值規定透明度。從 0.0 （完全透明）到 1.0（完全不透明）。設置opacity元素的所有后代元素會隨着一起具有透明性，一般用於調整圖片或者模塊的整體不透明度。

rgba用於設置顏色的透明度，參數是rgba(red, green, blue, alpha) alpha的取值從 0（完全透明） 到 1（完全不透明），如rgba(255,255,255,0.8)。

深度思考

如果是在手機上查看，沒有HOVER效果時應該怎么辦？

手機端沒有hover特效，當你點擊的時候就直接觸發click.

：hover在Android系統上點擊會出現， 但是需要再次點擊才會消失；IOS系統上點擊無法出現

手機雖然沒有鼠標，但是有觸摸事件

觸摸事件(touch)會在用戶手指放在屏幕上面的時候、 在屏幕上滑動的時候或者是從屏幕上移開的時候觸發。

1. touchstart事件：當手指觸摸屏幕時候觸發，即使已經有一個手指放在屏幕上也會觸發。
2. touchmove事件：當手指在屏幕上滑動的時候連續地觸發。在這個事件發生期間，調用preventDefault()事件可以阻止滾動。
3. touchend事件：當手指從屏幕上離開的時候觸發。
4. touchcancel事件：touchcancel，是在拖動中斷時候觸發。

rgba和opacity的透明效果有什么不同？display和visiblity有什么區別？

rgba是什么：

RGB（Red（紅色） Green（綠色） Blue（藍色））的基礎上增加了一個通道Alpha。

Alpha參數為透明值，在0~1之間。RGBa 擴展了 RGB的顏色

rgba（）是css中設置背景顏色中的一個屬性。

Opasity是什么：

opacity屬性設置一個元素的透明度級別。

opacity是css的一個屬性，取值0~1，0為完全透明，1為完全不透明。默認是繼承父元素opacity屬性，所以子元素會繼承父元素的opacity屬性值，從而產生相同的效果

區別是什么：

rgba（ ）的作用對象是元素的背景顏色或元素的顏色，其對象的子元素不能夠繼承它的透明度；

opacity的作用對象是元素，以及元素的所有內容，並且其子元素能夠繼承它的透明度

display和visibility

display:none與元素的顯隱

當元素設置display:none后，界面上將不會顯示該元素，並且該元素不占布局空間（影響布局），但我們仍然可以通過JavaScript操作該元素。

display如果值為none，則該元素以及所有后代元素都隱藏，反之如果值是非none的情況，則都為顯示了

none做到了無法點擊、無法使用屏幕閱讀器等輔助設備訪問，不占空間

display: none的元素的background-image圖片根據不同瀏覽器的情況加載情況不一

• 在Firefox瀏覽器下，display:none的background-image圖片不加載，包括父元素display:none也是如此
• 在Chrome和Safari瀏覽器，則根據父元素是否是否為none來影響圖片加載情況，父元素帶有display:none，圖片不加載。父元素不帶有display:none,而自身有背景圖元素帶的話，那也照樣加載
• 在IE瀏覽器下，無論怎么搞都會請求圖片資源

visibility與元素的顯隱

1. 繼承性

• 父元素設置visibility:hidden，子元素也繼承了該屬性，也是看不見的
• 不過本質區別在於，父元素設置了hidden后，子元素設置visible后，子元素是可以被看都的
• 這點父元素設置了display:none，子元素就永遠看不到了

2. 與css計數器
   visibility:hidden雖然讓元素不可見了，但是不影響其計數效果，不會重新計算結果
3. 與transition
   設置了visibility:hidden的元素，可以很好的展現transition過渡效果
   這是因為transition支持的css屬性中有visibility
4. 與JS
   visibility:hidden除了對transition友好外，對js來說也很友好
   在實際開發中，需要對隱藏元素進行尺寸和位置的獲取，來實現布局精確定位的交互
   此時，就建議使用visibility:hidden

比較好的隱藏場景

• 不占空間，不渲染 使用script<script type="text/html">

<script type="text/html">
<!-- 圖片是不會發送請求的 -->
    <img src="1.jpg" />
    <!-- 如果想嵌套需要借助textarea了 -->
    <textarea style="display: none;">
        <img src="2.png" />
    </textarea>
</script>

• 不占空間，資源可以加載，DOM可訪問 使用display:none

<div id="box">成都</div>
    <script>
        let oBox = document.getElementById('box');
        console.log(oBox);  // <div id="box">成都</div>
    </script>

• 不占空間，隱藏顯示時有transition效果

.hidden {
    position: absolute;
    visibility: hidden;
}

<div class="div hidden">一杯敬朝陽 一杯敬月光</div>

• 占空間，不能點擊 visibility: hidden

.vh {
    visibility: hidden;
}

• 不占空間，不能點擊，鍵盤能訪問 clip裁切

.out {
    position: relative;
    left: -999em;
}
.clip {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

<div class="clip">
    <div class="out">青花瓷</div>
</div>

• 占空間，不能點擊，鍵盤能訪問 relative

<div style="position: relative;top: -999em;">獅子座</div>

• 占空間，可以點擊 opacity

<div style="opacity: 0; filter: alpha(opacity=0);">透明度</div>

• 隱藏文字 使用text-indent

<p style="text-indent: -999999px;">天下無雙</p>