视频／Video

启用视频播放展示或进入视窗时再播放视频。

视频组件为视频提供两种高级功能。第一种是视频被CSS隐藏时自动暂停，当它再次可见时继续播放；第二种是视频在视口外时暂停播放，当视频进入视口时才开始播放。

其次，它可以让您YouTube和Vimeo视频静音，如果将它们作为视频背景，那么通常需要这样。

例如， Slideshow, Lightbox 和 Cover 组件会继承并使用这两个功能。

用法

要应用此组件，请将 uk-video 属性添加到 <video> 元素。只要使用CSS隐藏该视频，该视频就会暂停，并在再次显示后恢复。

<video uk-video></video>
  • <button class="uk-button uk-button-default uk-margin" type="button" uk-toggle="target: +">Toggle HTML5 Video</button>

<video src="https://yootheme.com/site//images/media/yootheme-pro.mp4" controls playsinline hidden uk-video></video>

视频离开视口时暂停视频

要在视频进入视口时播放视频，并在视频离开视口时暂停视频，只需将 uk-video="autoplay: inview" 属性添加到 <video> 元素即可。

<video uk-video="autoplay: inview"></video>
  • <video src="/images/yootheme-pro.mp4" loop muted playsinline uk-video="autoplay: inview"></video>

YouTube 或 Vimeo视频自动静音

要将YouTube或Vimeo的视频默认静音，请将 uk-video="automute: true" 属性添加到 <iframe> 元素内。

<iframe src="" width="" height="" frameborder="0" uk-video="automute: true"></iframe>
  • <button class="uk-button uk-button-default uk-margin-bottom" type="button" uk-toggle="target: +">Toggle YouTube Video</button>

<iframe src="https://v.youku.com/v_show/id_XNDIyNjI2MjQ3Mg==.html?autoplay=0&amp;showinfo=0&amp;rel=0&amp;modestbranding=1&amp;playsinline=1" width="1920" height="1080" frameborder="0" allowfullscreen uk-responsive uk-video="automute: true"></iframe>

组件选项

下表列出了 uk-video 属性的可用设置。 了解更多

选项 可用值 默认值 描述
autoplay Boolean, String true 视频在页面上可见/隐藏时会自动播放/暂停。值为 inview 会延迟加载视频并在视频进入/离开视口时播放/暂停视频。
automute Boolean false 自动将YouTube或Vimeo视频静音。

autoplay 是 Primary 选项，如果它是属性值中的唯一选项，则可以省略其键。

JavaScript

了解更多关于 JavaScript 组件的内容。

初始化

UIkit.video(element, options);

上一篇： Utility

下一篇： Visibility

video.md

# 视频／Video

<p class="uk-text-lead">启用视频播放展示或进入视窗时再播放视频。</p>

视频组件为视频提供两种高级功能。第一种是视频被CSS隐藏时自动暂停，当它再次可见时继续播放；第二种是视频在视口外时暂停播放，当视频进入视口时才开始播放。

其次，它可以让您YouTube和Vimeo视频静音，如果将它们作为视频背景，那么通常需要这样。

例如， [Slideshow](slideshow.md#videos), [Lightbox](lightbox.md#content-sources) 和 [Cover](cover.md#video) 组件会继承并使用这两个功能。

***

## Usage-用法

要应用此组件，请将 `uk-video` 属性添加到 `<video>` 元素。只要使用CSS隐藏该视频，该视频就会暂停，并在再次显示后恢复。

```html
<video uk-video></video>
```

```example
<button class="uk-button uk-button-default uk-margin" type="button" uk-toggle="target: +">Toggle HTML5 Video</button>

<video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" controls playsinline hidden uk-video></video>
```

***

## Autoplay inview-视频离开视口时暂停视频

要在视频进入视口时播放视频，并在视频离开视口时暂停视频，只需将 `uk-video="autoplay: inview"` 属性添加到 `<video>` 元素即可。

```html
<video uk-video="autoplay: inview"></video>
```

```example
<video src="images/yootheme-pro.mp4" loop muted playsinline uk-video="autoplay: inview"></video>
```

***

## Automute YouTube or Vimeo-YouTube 或 Vimeo视频自动静音

要将YouTube或Vimeo的视频默认静音，请将 `uk-video="automute: true"` 属性添加到 `<iframe>` 元素内。

```html
<iframe src="" width="" height="" frameborder="0" uk-video="automute: true"></iframe>
```

```example
<button class="uk-button uk-button-default uk-margin-bottom" type="button" uk-toggle="target: +">Toggle YouTube Video</button>

<iframe src="https://v.youku.com/v_show/id_XNDIyNjI2MjQ3Mg==.html?autoplay=0&amp;showinfo=0&amp;rel=0&amp;modestbranding=1&amp;playsinline=1" width="1920" height="1080" frameborder="0" allowfullscreen uk-responsive uk-video="automute: true"></iframe>
```

***

## Component options-组件选项

下表列出了 `uk-video` 属性的可用设置。 [了解更多](javascript.md#component-configuration)

| 选项     | 可用值           | 默认值 | 描述                      |
|:-----------|:----------------|:--------|:---------------------------------|
| `autoplay` | Boolean, String | `true`  | 视频在页面上可见/隐藏时会自动播放/暂停。值为 `inview` 会延迟加载视频并在视频进入/离开视口时播放/暂停视频。 |
| `automute` | Boolean         | `false` | 自动将YouTube或Vimeo视频静音。 |

`autoplay` 是 _Primary_ 选项，如果它是属性值中的唯一选项，则可以省略其键。

***

## JavaScript

了解更多关于 [JavaScript 组件](javascript.md#programmatic-use)的内容。

### 初始化

```js
UIkit.video(element, options);
```