밉 비디오 비디오

mip-video는 Mip에 비디오 콘텐츠 추가를 지원하는 데 사용됩니다. 이는 HTML <video><입니다. / 코드에 대한 직접 래퍼>. 기능 및 호환성은 HTML5<video>와 일치합니다. <video>的直接包装。 功能与兼容性与HTML5<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>

예< /h2>

기본 사용법

<mip- 비디오 포스터="https://placehold.it/640x360" 컨트롤

레이아웃="반응형" width="640" 높이="360"
src="https://gss0.bdstatic.com/-b1Caiqa0d9Bmcmop9aC2jh9h2w8e4_h7sED0YQ_t9iCPK/mda- gjkt21pkrsd8ae5y/mda-gjkt21pkrsd8ae5y.mp4">
</mip-video>

속성

모든<video> 속성은 <mip-video>. 예를 들어 아래 비디오는 너비, 높이, 컨트롤, 루프, 음소거 등과 같은 속성을 설정합니다.
rrreee

여러 비디오 소스

HTML5 <video>와 마찬가지로 다양한 디코딩 라이브러리가 있는 브라우저와 호환되도록 여러 비디오 소스를 제공할 수 있습니다.

🎜<mip-video는 레이아웃="반응형" width="640" height="360">🎜 <!-- MP4는 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+ -->🎜 < 소스 src="https://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">🎜</mip-video>🎜🎜

만료 프롬프트

HTML5<video>를 지원하지 않는 환경의 경우, <mip - video>도 프롬프트 정보를 표시할 수 있습니다. <mip-video>내부 DOM(<source>)는 <video> 태그를 지원하지 않는 브라우저에서 표시됩니다.

<mip-video는 레이아웃="반응형" 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><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>

속성

다음은 몇 가지 중요한 입니다. <mip-video> 속성. 실제로 모든 HTML5 <video> 속성을 ​​사용할 수 있습니다. 이에 대해서는 MDN 문서를 참조하세요: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

src

🎜설명: 비디오 소스 주소는 https 리소스여야 합니다.
필수 옵션: 아니요
유형: 문자열
값 범위: URL
기본값: 없음

poster🎜🎜 설명: 표지 이미지 주소. 비디오 로딩 과정에서 좋은 프리젠테이션 효과를 보장하려면 이 필드를 설정하세요.
필수: 아니요
유형: 문자열
값 범위: URL
기본값: 없음

controls🎜🎜설명: 시작/일시 중지 버튼을 포함한 비디오 제어 컨트롤 표시 여부 , 전체 화면 버튼, 볼륨 버튼 등 자동 재생되지 않는 비디오의 경우 이 속성을 설정해야 합니다.
필수: 아니요
유형: 문자열
값 범위: 모두
기본값: 없음

자동 재생 🎜🎜설명 : 자동으로 재생할지 여부입니다.
필수: 아니요
유형: 문자열
값 범위: 모두
기본값: 없음

주의사항

1. 동영상 로딩으로 인한 페이지 흔들림을 방지하기 위해 지정된 동영상의 높이와 너비가 하나 좋은 습관. MIP에서는 너비와 높이를 지정하는 것이 필수입니다. 🎜
2. 레이아웃 속성이 정의된 경우 너비 및 높이 속성은 레이아웃에 맞춰 조정됩니다. 🎜
3. 동영상을 올바르게 재생하려면 src가 비어 있을 때 <source> 하위 요소를 추가해야 합니다. 🎜🎜🎜