跳至主要内容

文档

视频

在视频显示或进入视窗时开始播放。

视频组件为视频提供了两个高级功能。首先，它允许您在视频使用 CSS 隐藏时暂停视频，并在视频再次可见时恢复播放。此外，视频可以在超出视窗范围时暂停，并在进入视窗范围时开始播放。

其次，它允许您静音 YouTube 和 Vimeo 视频，这在将视频用作部分背景时通常需要。

例如，幻灯片、灯箱 和 封面 组件继承并利用了这两个功能。

用法

要应用此组件，请将 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" width="1920" height="1080" controls playsinline hidden uk-video></video>

自动播放

有两种自动播放选项可用于播放视频。只需将 autoplay 选项添加到 uk-video 属性并应用以下值之一。

值 描述
inview 当视频进入视窗范围时播放视频，并在视频离开视窗范围时暂停。
hover 当鼠标悬停在视频上时播放视频，并在鼠标离开悬停状态时暂停。 
<video src="" width="" height="" uk-video="autoplay: inview"></video>
<video src="" width="" height="" uk-video="autoplay: hover"></video>
  • <div class="uk-child-width-1-2@m" uk-grid>
    <div>

        <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1800" height="1200" loop muted playsinline uk-video="autoplay: inview"></video>

    </div>
    <div>

        <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1800" height="1200" loop muted playsinline uk-video="autoplay: hover"></video>

    </div>
</div>

自动静音 YouTube 或 Vimeo

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

<iframe src="" width="" height="" 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" allowfullscreen uk-responsive uk-video="automute: true"></iframe>

组件选项

这些选项中的任何一个都可以应用于组件属性。使用分号分隔多个选项。 了解更多

选项 值 默认值 描述
autoplay 布尔值，字符串 true 视频在页面上可见/隐藏时自动播放/暂停。此外，视频可以在其处于视窗范围内或鼠标悬停时播放 (inview、hover)。
automute 布尔值 false 自动静音 YouTube 或 Vimeo 视频。

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

JavaScript

了解更多关于 JavaScript 组件。

初始化

UIkit.video(element, options);