跳转到主要内容

文档

视频

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

视频组件为视频提供了两个高级功能。首先，它允许你在视频通过 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);