video mip-video


mip-video digunakan untuk menyokong penambahan kandungan video dalam mip Ia adalah HTML <video><. / Pembalut langsung untuk kod>. Kefungsian dan keserasian adalah konsisten dengan 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>

QQ screenshot 20170204112742.png

Contoh< /h2>

Penggunaan asas

<mip- poster video="https://placehold.it/640x360" controls
layout="responsive" width="640" height="360"
src="https://gss0.bdstatic.com/-b1Caiqa0d9Bmcmop9aC2jh9h2w8e4_h7tsEDiCPYK gjkt21pkrsd8ae5y/mda-gjkt21pkrsd8ae5y.mp4">
</mip-video>

Atribut


<video Atribut boleh didapati dalam <mip-video>. Contohnya, video di bawah menetapkan sifat seperti lebar, ketinggian, kawalan, gelung, diredamkan, dsb.
rrreee

Berbilang sumber video


dengan HTML5 Seperti <video>, berbilang sumber video boleh disediakan agar serasi dengan penyemak imbas dengan perpustakaan penyahkodan yang berbeza.
🎜<mip-video mengawal susun atur="responsif" width="640" height="360">🎜 <!-- MP4 mestilah yang pertama untuk iPad -->🎜 <sumber src=" https://gss0.bdstatic.com/-b1Caiqa0d9Bmcmop9aC2jh9h2w8e4_h7sED0YQ_t9iCPK/mda-gjkt21pkrsd8ae5y/mda-gjkt21pkrsd8ae5y.mp4" type="gsd8ae5y.mp4" & ;🎜 < sumber src="https://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">🎜 <!-- Chrome10+, Ffx4+, Opera10.6+ -->🎜 < sumber src="https://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">🎜</mip-video>🎜🎜

Gesaan tamat tempoh

Untuk persekitaran yang tidak menyokong HTML5<video>, <mip - video> juga boleh memaparkan maklumat segera. <mip-video>DOM Dalaman (<source>) akan dipaparkan dalam penyemak imbas yang tidak menyokong teg <video>.

<mip-video controls layout="responsive" width="640" height="360"
src="https://gss0. bdstatic.com/-b1Caiqa0d9Bmcmop9aC2jh9h2w8e4_h7sED0YQ_t9iCPK/mda-gjkt21pkrsd8ae5y/mda-gjkt21pkrsd8ae5y.mp4">

> Anda tidak boleh memuat turun video daripada penyemak imbas anda. www. baidu.com" target="_blank">Di sini</a> Muat turun video.
</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. Atribut

Berikut ialah beberapa penting atribut <mip-video>. Sebenarnya, semua atribut HTML5 <video> tersedia, Untuk ini, sila rujuk dokumentasi MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

src

🎜Penerangan : Alamat sumber video, mestilah sumber https
Pilihan yang diperlukan: Tidak
Jenis: Rentetan
Julat nilai: URL
Nilai lalai: Tiada

poster🎜🎜 Penerangan: Alamat imej muka depan Untuk memastikan kesan pembentangan yang baik semasa proses pemuatan video, sila tetapkan medan ini
Diperlukan: Tidak
Jenis: Rentetan
Julat nilai: URL
Nilai lalai: Tiada

kawalan🎜🎜Penerangan: Sama ada mahu memaparkan kawalan kawalan video, termasuk butang mula/jeda , butang skrin penuh, butang kelantangan, dsb. Untuk video yang tidak dimainkan secara automatik, pastikan anda menetapkan sifat ini.
Diperlukan: Tidak
Jenis: Rentetan
Julat nilai: mana-mana
Nilai lalai: Tiada

autoplay 🎜🎜Penerangan : Sama ada hendak bermain secara automatik.
Diperlukan: Tidak
Jenis: Rentetan
Julat nilai: mana-mana
Nilai lalai: Tiada

Nota

  1. Untuk mengelakkan halaman daripada bergegar akibat pemuatan video, ketinggian dan lebar video yang ditentukan adalah satu Tabiat yang baik. Dalam MIP, menentukan lebar dan ketinggian adalah wajib. 🎜
  2. Jika atribut reka letak ditakrifkan, atribut lebar dan ketinggian akan diskalakan bersama dengan reka letak. 🎜
  3. Untuk memainkan video dengan betul, pastikan anda menambah elemen anak <source> apabila src kosong. 🎜🎜🎜
←