mip-video 視頻

mip-video 用來支持在 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>一樣，可以提供多個視頻源，以兼容不同解碼庫的瀏覽器。

<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>

失效提示

對于不支持HTML5<video>的環(huán)境，<mip-video>同樣可以顯示提示信息。<mip-video>內(nèi)部的DOM（<source>除外）將會在不支持<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>

屬性

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

src

說明：視頻源地址，必須是https資源
必選項：否
類型：字符串
取值范圍：URL
默認值：無

poster

說明：封面圖地址，為了保證視頻載入過程中仍然有很好的呈現(xiàn)效果，請設(shè)置該字段
必選項：否
類型：字符串
取值范圍：URL
默認值：無

controls

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

autoplay

說明：是否自動播放。
必選項：否
類型：字符串
取值范圍：任何
默認值：無

注意事項

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