mip-video 視頻


mip-video 用來支援在 mip 中增加影片內容，是HTML <video>的直接包裝。 功能與相容性與HTML5<video>一致。

QQ截图20170204112742.png

範例

基本使用

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

Attributes

所有<video>屬性都可以在<mip-video>上使用，例如下面的影片設定了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  <!-- MP4 must be first  <!-- MP4 must be first for ;
  <source src="https://gss0.bdstatic.com/-b1Caiqa0d9Bmcmop9aC2jh9h2w8e4_h7sED0YQ_t9iCPK/mda-gjkt21pkrsd855y/mda-g  <!-- 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">
ogg">## </mip-video>

失效提示

對於不支援HTML5<video>的環境，<mip-video>#同樣可以顯示提示資訊. <mip-video>內部的DOM（<source>除外）將會在不支援<video>標籤的瀏覽器中顯示。

<mip-video controls layout="responsive" width="640" height="360" 
  src="https://gss0.bdstatic.com/-b1Caiqa#  src="https://gss0.bdstatic.com/-b1Caiqa#  src="https://gss0.bdstatic.com/-b1Caiqa#  src="https://gss0.bdstatic.com/-b1Caiqa#  src="https://gss0.bdstatic.com/-b1Caiqa0d9Bmcp9a0dQ2012050205050000500020 -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

說明：封面圖位址，為了確保影片載入過程中仍有很好的呈現效果，請設定該欄位

必選項：否
類型：字串
取值範圍：URL
預設值：無

controls

說明：是否顯示視訊控制控件，包括開始/暫停按鈕、全螢幕按鈕、音量按鈕等。對於非自動播放視頻，請務必設定該屬性。

必選項：否
類型：字串
取值範圍：任何
預設值：無

autoplay

說明：是否自動播放。

必選項：否
類型：字串
取值範圍：任何
預設值：無

#注意事項

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