vidéo mip-vidéo


mip-video est utilisé pour prendre en charge l'ajout de contenu vidéo dans mip. Il s'agit de HTML <video>< / Un wrapper direct pour le code>. La fonctionnalité et la compatibilité sont conformes au HTML5<video>. <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/-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>

Capture d'écran QQ 20170204112742.png

Exemple< /h2>

Utilisation de base

<mip- affiche vidéo="https://placehold.it/640x360" contrôles
layout="responsive" width="640" height="360"
src="https://gss0.bdstatic.com/-b1Caiqa0d9Bmcmop9aC2jh9h2w8e4_h7sED0YQ_t9iCPK/mda- gjkt21pkrsd8ae5y/mda-gjkt21pkrsd8ae5y.mp4">
</mip-video>

Attributs


Tous<video> Les attributs peuvent être trouvés dans <mip-video>. Par exemple, la vidéo ci-dessous définit des propriétés telles que la largeur, la hauteur, les commandes, la boucle, le mode sourdine, etc.
rrreee

Sources vidéo multiples


avec HTML5 Comme <video>, plusieurs sources vidéo peuvent être fournies pour être compatibles avec les navigateurs dotés de différentes bibliothèques de décodage.
🎜<mip-video Controls layout="responsive" width="640" height="360">🎜 <!-- MP4 doit être le premier pour 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>🎜🎜

Invite d'expiration

Pour les environnements qui ne prennent pas en charge HTML5<video>, <mip - video> peut également afficher des informations d'invite. <mip-video>DOM interne (<source>) sera affiché dans les navigateurs qui ne prennent pas en charge la balise <video>.

<contrôles mip-video layout="responsive" width="640" height="360"
src="https://gss0. bdstatic.com/-b1Caiqa0d9Bmcmop9aC2jh9h2w8e4_h7sED0YQ_t9iCPK/mda-gjkt21pkrsd8ae5y/mda-gjkt21pkrsd8ae5y.mp4">
Votre navigateur ne prend pas en charge la lecture vidéo, vous pouvez le télécharger depuis
<a href="http:// www.baidu.com" target="_blank">Ici</a> Téléchargez la vidéo.
</mip-video><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>

属性

下面是几个重要的<mip-video>属性。事实上，所有HTML5 <video>属性都是可用的， 对此可参考MDN文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

src

说明：视频源地址，必须是https资源
必选项：否
类型：字符串
取值范围：URL
默认值：无

poster

说明：封面图地址，为了保证视频载入过程中仍然有很好的呈现效果，请设置该字段
必选项：否
类型：字符串
取值范围：URL
默认值：无

controls

说明：是否显示视频控制控件，包括开始/暂停按钮、全屏按钮、音量按钮等。对于非自动播放视频，请务必设置该属性。
必选项：否
类型：字符串
取值范围：任何
默认值：无

autoplay

说明：是否自动播放。
必选项：否
类型：字符串
取值范围：任何
默认值：无

注意事项

  1. 为防止视频加载造成页面抖动，指定视频的高度和宽度是一个好习惯。MIP中，指定宽高是强制的。
  2. 如果定义了layout属性，width和height属性将配合layout进行缩放。
  3. 为了正确地播放视频，src为空时请务必添加<source>

    4. Attributs

Voici plusieurs importants Attribut <mip-video>. En fait, tous les attributs HTML5 <video> sont disponibles, Pour cela, veuillez vous référer à la documentation MDN : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

src

🎜Description : Adresse de la source vidéo, doit être une ressource https
Option obligatoire : Non
Type : Chaîne
Plage de valeurs : URL
Valeur par défaut : Aucune

poster🎜🎜 Description : Adresse de l'image de couverture Afin de garantir un bon effet de présentation pendant le processus de chargement de la vidéo, veuillez définir ce champ
Obligatoire : Non
Type : Chaîne
Plage de valeurs : URL
Valeur par défaut : Aucune

controls🎜🎜Description : s'il faut afficher les commandes de contrôle vidéo, y compris le bouton démarrer/pause , bouton plein écran, bouton de volume, etc. Pour les vidéos qui ne sont pas en lecture automatique, veillez à définir cette propriété.
Obligatoire : Non
Type : Chaîne
Plage de valeurs : toute
Valeur par défaut : Aucune

lecture automatique 🎜🎜Description : s'il faut jouer automatiquement.
Obligatoire : Non
Type : Chaîne
Plage de valeurs : toute
Valeur par défaut : Aucune

Remarques

  1. Pour éviter que la page ne tremble en raison du chargement de la vidéo, la hauteur et la largeur de la vidéo spécifiée sont une Bonnes habitudes. Dans MIP, la spécification de la largeur et de la hauteur est obligatoire. 🎜
  2. Si l'attribut de mise en page est défini, les attributs de largeur et de hauteur seront mis à l'échelle en conjonction avec la mise en page. 🎜
  3. Afin de lire la vidéo correctement, assurez-vous d'ajouter l'élément enfant <source> lorsque src est vide. 🎜🎜🎜

←