mip-video video


mip-video is used to support adding video content in mip. It is a direct package of HTML <video>. Functionality and compatibility are consistent with HTML5<video>.

QQ截图20170204112742.png

Example

Basic usage

<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-gjkt21 pkrsd8ae5y.mp4"> ;
</mip-video>

Attributes

All <video> attributes can be found in <mip-video>. For example, the video below sets attributes such as width, height, controls, loop, and 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>

Multiple video sources

Like HTML5<video>, multiple video sources can be provided to be compatible with browsers with different decoding libraries.

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

Invalidation prompt

For environments that do not support HTML5<video>, <mip-video> can also display prompts information. <mip-video>The internal DOM (except <source>) will not support the <video> tag displayed in the browser.

<mip-video controls layout="responsive" width="640" height="360"
src="https://gss0.bdstatic.com/-b1Caiqa0d9Bmcmop9aC2jh9h2w8e4_h7sED0YQ_t9iCPK/mda -gjkt21pkrsd8ae5y/mda-gjkt21pkrsd8ae5y.mp4">
Your browser does not support video playback, you can download it from
<a href="http://www.baidu.com" target="_blank"> ;Download the video here</a>.
</mip-video>

Attributes

The following are several important <mip-video> Attributes. In fact, all HTML5 <video> attributes are available, For this, please refer to the MDN documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

src

Instructions : Video source address, must be an https resource
Required option: No
Type: String
Value range: URL
Default value: None

poster

Description: Cover image address. In order to ensure a good rendering effect during the video loading process, please set this field
Required option: No
Type: String
Value range: URL
Default value: None

controls

Description: Whether to display video control controls, including start/pause button, full screen button, volume button, etc. For non-autoplaying videos, be sure to set this property.
Required option: No
Type: String
Value range: Any
Default value: None

autoplay

Description: Whether to play automatically.
Required options: No
Type: String
Value range: any
Default value: None

Notes

  1. To prevent the video from loading To cause page jitter, it is a good practice to specify the height and width of the video. In MIP, specifying width and height is mandatory.
  2. If the layout attribute is defined, the width and height attributes will be scaled in conjunction with the layout.
  3. In order to play the video correctly, be sure to add the <source> child element when src is empty.