ミップビデオビデオ


mip-video は、mip へのビデオ コンテンツの追加をサポートするために使用され、HTML <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> と一致しています。

QQ スクリーンショット 20170204112742.png

例< /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 コントロールlayout="sensitive" width="640" height="360">🎜 <!-- iPad では MP4 が最初でなければなりません! -->🎜 <source src=" https://gss0.bdstatic.com/-b1Caiqa0d9Bmcmop9aC2jh9h2w8e4_h7sED0YQ_t9iCPK/mda-gjkt21pkrsd8ae5y/mda-gjkt21pkrsd8ae5y.mp4" type="video/mp4">🎜 <!-- Safari / iOS、IE9 --> ;🎜 <;ソース 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 (<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> を除く) はサポートされません< 表示ブラウザの code><video> タグ。

<mip-video コントロール レイアウト="応答性" width="640" 高さ="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 である必要があります。 resource
必須 いいえ オプション: No
タイプ: String
値の範囲: URL

デフォルト値: なし

コントロール


説明: スタート/一時停止ボタン、全画面ボタン、音量ボタンなどのビデオ コントロール コントロールを表示するかどうか。自動再生しないビデオの場合は、必ずこのプロパティを設定してください。
必須オプション: いいえ
タイプ: 文字列
値の範囲: 任意

デフォルト値: なし

autoplay


説明: 自動的に再生するかどうか。
必須オプション: いいえ
タイプ: 文字列
値の範囲: 任意

デフォルト値: なし

注意事項
  1. ビデオの読み込みによって引き起こされるページのジッターを防ぐために、ビデオの高さと幅を指定することを習慣にしてください。 MIP では、幅と高さの指定は必須です。
  2. レイアウト属性が定義されている場合、幅と高さの属性はレイアウトに連動して拡大縮小されます。
  3. <source>ビデオを正しく再生するには、src が空の場合は必ず
    4. 子要素を追加してください。
🎜
←