UIkit3.x文档

视频

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

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

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

例如,Slideshow, LightboxCover 组件会继承并使用这两个功能。


用法

要应用此组件,请将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&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视频静音。

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


JavaScript

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

初始化

UIkit.video(element, options);