mip-video 視頻

mip-video 用來(lái)支持在 mip 中增加視頻內(nèi)容，是HTML <video>的直接包裝。 功能與兼容性與HTML5<video>一致。

示例

基本使用

<mip-video poster="https://placehold.it/640x360" controls
  layout="responsive" width="640" height="360" 
  src="https://gss0.bdstatic.com/-b1Caiqa0d9Bmcmop9aC2jh9h2w8e4_h7sED0YQ_t9iCPK/mda-gjkt21pkrsd8ae5y/mda-gjkt21pkrsd8ae5y.mp4">
</mip-video>

Attributes

所有<video>屬性都可以在<mip-video>上使用，例如下面的視頻設(shè)置了width, height, controls, loop, muted等屬性。

<mip-video controls loop muted
  layout="responsive" width="640" height="360" 
  src="https://gss0.bdstatic.com/-b1Caiqa0d9Bmcmop9aC2jh9h2w8e4_h7sED0YQ_t9iCPK/mda-gjkt21pkrsd8ae5y/mda-gjkt21pkrsd8ae5y.mp4">
</mip-video>

多視頻源

與HTML5<video>一樣，可以提供多個(gè)視頻源，以兼容不同解碼庫(kù)的瀏覽器。

<mip-video controls layout="responsive" width="640" height="360">
  <!-- MP4 must be first for iPad! -->
  <source src="https://gss0.bdstatic.com/-b1Caiqa0d9Bmcmop9aC2jh9h2w8e4_h7sED0YQ_t9iCPK/mda-gjkt21pkrsd8ae5y/mda-gjkt21pkrsd8ae5y.mp4" type="video/mp4">
  <!-- Safari / iOS, IE9 -->
  <source src="https://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
  <!-- Chrome10+, Ffx4+, Opera10.6+ -->
  <source src="https://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">
</mip-video>

失效提示

對(duì)于不支持HTML5<video>的環(huán)境，<mip-video>同樣可以顯示提示信息。<mip-video>內(nèi)部的DOM（<source>除外）將會(huì)在不支持<video>標(biāo)簽的瀏覽器中顯示。

<mip-video controls layout="responsive" width="640" height="360" 
  src="https://gss0.bdstatic.com/-b1Caiqa0d9Bmcmop9aC2jh9h2w8e4_h7sED0YQ_t9iCPK/mda-gjkt21pkrsd8ae5y/mda-gjkt21pkrsd8ae5y.mp4">
  您的瀏覽器不支持視頻播放，可以從
  <a href="http://www.baidu.com" target="_blank">這里</a> 下載該視頻。
</mip-video>

屬性

下面是幾個(gè)重要的<mip-video>屬性。事實(shí)上，所有HTML5 <video>屬性都是可用的， 對(duì)此可參考MDN文檔：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

src

說(shuō)明：視頻源地址，必須是https資源
必選項(xiàng)：否
類型：字符串
取值范圍：URL
默認(rèn)值：無(wú)

poster

說(shuō)明：封面圖地址，為了保證視頻載入過(guò)程中仍然有很好的呈現(xiàn)效果，請(qǐng)?jiān)O(shè)置該字段
必選項(xiàng)：否
類型：字符串
取值范圍：URL
默認(rèn)值：無(wú)

controls

說(shuō)明：是否顯示視頻控制控件，包括開始/暫停按鈕、全屏按鈕、音量按鈕等。對(duì)于非自動(dòng)播放視頻，請(qǐng)務(wù)必設(shè)置該屬性。
必選項(xiàng)：否
類型：字符串
取值范圍：任何
默認(rèn)值：無(wú)

autoplay

說(shuō)明：是否自動(dòng)播放。
必選項(xiàng)：否
類型：字符串
取值范圍：任何
默認(rèn)值：無(wú)

注意事項(xiàng)

1. 為防止視頻加載造成頁(yè)面抖動(dòng)，指定視頻的高度和寬度是一個(gè)好習(xí)慣。MIP中，指定寬高是強(qiáng)制的。
2. 如果定義了layout屬性，width和height屬性將配合layout進(jìn)行縮放。
3. 為了正確地播放視頻，src為空時(shí)請(qǐng)務(wù)必添加<source>子元素。