Mip-video video is what mip-video video how to use

Title	Content
Type	General
Support layout	Responsive,fixed-height,fill,container,fixed
The required script	No

Example

Basic use

<mip-videoposter= "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

All <video> properties can be used on <mip-video>, for example, the following video sets the width, height, controls, loop, muted and other properties.

<mip-video controlsloopmuted

layout= "responsive" width= "640" height= "360"

Src= "https://gss0.bdstatic.com/-b1Caiqa0d9Bmcmop9aC2jh9h2w8e4_h7sED0YQ_t9iCPK/mda-gjkt21pkrsd8ae5y/ Mda-gjkt21pkrsd8ae5y.mp4 ">

</mip-video>

Multi-Video source

As with html5<video>, you can provide multiple video feeds to compatible browsers with different decoding libraries.

<mip-video controlslayout= "responsive" width= "640" height= "360" >

<!--MP4 must be the ipad! -->

<sourcesrc= "https://gss0.bdstatic.com/-b1Caiqa0d9Bmcmop9aC2jh9h2w8e4_h7sED0YQ_t9iCPK/mda-gjkt21pkrsd8ae5y/ Mda-gjkt21pkrsd8ae5y.mp4 "type=" Video/mp4 ">

<!--Safari/ios, IE9-->

<sourcesrc= "HTTPS://CLIPS.VORWAERTS-GMBH.DE/VFE.WEBM" type= "VIDEO/WEBM" >

<!--chrome10+, ffx4+, opera10.6+-->

<sourcesrc= "HTTPS://CLIPS.VORWAERTS-GMBH.DE/VFE.OGV" type= "Video/ogg" >

</mip-video>

Expiration prompt

For environments that do not support html5<video>,<mip-video> can also display prompt information.

<mip-video> internal Dom (except <source>) will be displayed in browsers that do not support <video> tags.

<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

<ahref= "http://www.baidu.com" target= "_blank" > here </a> download this video.

</mip-video>

Property

Here are a couple of important <mip-video> properties. In fact, all HTML5 <video> properties are available,

Reference to this MDN documentation: Https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

Src

Description: Video source address, must be an HTTPS resource

Required option: No

Type: string

Value range: URL

Default value: None

Poster

Description: Cover page map address, to ensure that the video loading process still has a good rendering effect, 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 buttons, full-screen buttons, volume buttons, and so on. Be sure to set this property for non-AutoPlay video.

Required option: No

Type: string

Value range: any

Default value: None

AutoPlay

Description: Whether to play automatically.

Required option: No

Type: string

Value range: any

Default value: None

Attention matters

To prevent page jitter from video loading, it is a good practice to specify the height and width of the video. In MIP, the designation of wide height is mandatory.

If the layout property is defined, the width and height properties are scaled with the layout.

To play the video correctly, be sure to add <source> child elements when SRC is empty.