视频
启用视频播放展示或进入视窗时再播放视频。
视频组件为视频提供两种高级功能。第一种是视频被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>
Autoplay inview
要在视频进入视口时播放视频，并在视频离开视口时暂停视频，只需将uk-video="autoplay: inview"属性添加到<video>元素即可。
<video uk-video="autoplay: inview"></video>
-
<video src="https://yootheme.com/site/images/media/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://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=0&showinfo=0&rel=0&modestbranding=1&playsinline=1" width="1920" height="1080" frameborder="0" allowfullscreen uk-responsive uk-video="automute: true"></iframe>
组件选项
下表列出了uk-video 属性的可用设置。了解更多
| Option | Value | Default | Description |
|---|---|---|---|
autoplay |
Boolean, String | true |
视频在页面上可见/隐藏时会自动播放/暂停。值为inview会延迟加载视频并在视频进入/离开视口时播放/暂停视频。 |
automute |
Boolean | false |
自动将YouTube或Vimeo视频静音。 |
autoplay是Primary选项，如果它是属性值中的唯一选项，则可以省略其键。
JavaScript
了解更多关于JavaScript组件的内容。
初始化
UIkit.video(element, options);