mip-video 视频

阅读14027

更新时间2022-04-11

mip-pix 统计

mip-video 用来支持在 mip 中增加视频内容，是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>上使用，例如下面的视频设置了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">
  
  <source src="https://gss0.bdstatic.com/-b1Caiqa0d9Bmcmop9aC2jh9h2w8e4_h7sED0YQ_t9iCPK/mda-gjkt21pkrsd8ae5y/mda-gjkt21pkrsd8ae5y.mp4" type="video/mp4">
  
  <source src="https://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
  
  <source src="https://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/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/-b1Caiqa0d9Bmcmop9aC2jh9h2w8e4_h7sED0YQ_t9iCPK/mda-gjkt21pkrsd8ae5y/mda-gjkt21pkrsd8ae5y.mp4">
  您的浏览器不支持视频播放，可以从
  <a href="http://www.baidu.com" target="_blank">这里</a> 下载该视频。
</mip-video>