UIkit3.x文档

视频

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

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

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

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

用法

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

<video src="" width="" height="" 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&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 属性的可用设置。了解更多

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

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

JavaScript

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

初始化

UIkit.video(element, options);