Video

把视频当作动态图片来展示，精确控制自动播放，并可延迟加载或点击后加载——甚至支持 YouTube 视频。

Video 组件让你能够把视频当作动态图片无缝展示，并在所有浏览器中保持一致的自动播放行为。视频在不可见时会自动暂停（例如位于轮播中），一旦重新可见又会从同一位置无缝继续播放。它还能确保即使视频是通过 JavaScript 动态插入 DOM 的，muted 属性也能被正确应用。

用法

要应用该组件，请为 <video> 元素添加 uk-video 属性。自动播放会被自动处理，因此不需要 autoplay 属性。视频在离开视口时会继续播放，但如果其可见性变为隐藏则会暂停。不要添加任何控制条，而应改用 playsinline、loop 和 muted 属性，把视频显示为动态图片。

<video src="" width="" height="" playsinline loop muted uk-video></video>

<button class="uk-button uk-button-default uk-margin" type="button" uk-toggle="target: +">Toggle Video</button>

<video src="https://yootheme.com/media/videos/yootheme-pro.mp4" width="1920" height="1080" playsinline loop muted hidden uk-video></video>

自动播放

有两种自动播放模式。只需在 uk-video 属性中添加 autoplay 选项，并将其设为下列值之一。

Values	说明
`inview`	当视频进入视口时播放，离开视口时再次暂停。
`hover`	当鼠标悬停在视频上时播放，鼠标离开时再次暂停。

<video src="" width="" height="" playsinline loop muted uk-video="autoplay: inview"></video>
<video src="" width="" height="" playsinline loop muted uk-video="autoplay: hover"></video>

<div class="uk-child-width-1-2@m" uk-grid>
    <div>

        <video src="https://yootheme.com/media/videos/yootheme-pro.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview"></video>

    </div>
    <div>

        <video src="https://yootheme.com/media/videos/yootheme-pro.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: hover"></video>

    </div>
</div>

要在暂停后从最开始重新播放视频，请在 uk-video 属性中添加 restart 选项。

要用视频之外的某个元素来触发悬停时的自动播放，只需在 uk-video 属性中添加 hover-target: SELECTOR 选项。

延迟加载

要延迟加载视频，请为视频添加 preload="none" 属性。视频进入视口后，Video 组件会移除该属性，从而确保它延迟加载。

<video src="" width="" height="" playsinline loop muted preload="none" uk-video="autoplay: hover"></video>

<video src="https://yootheme.com/media/videos/yootheme-pro.mp4" width="1920" height="1080" playsinline loop muted preload="none" uk-video></video>

点击时加载

要让带封面图的视频在按下播放之前不加载，请为视频添加 uk-video="autoplay: false" 和 preload="none" 属性。

<video src="" width="" height="" poster="" controls preload="none" uk-video="autoplay: false"></video>

<video src="https://yootheme.com/media/videos/yootheme-pro.mp4" poster="images/photo.jpg" width="1920" height="1080" controls preload="none" uk-video="autoplay: false"></video>

另一种做法是显示一张占位图片，然后由 video 元素替换它。只需把隐藏的视频和带链接的图片并排放置在一个容器元素中，并为图片链接添加 Toggle 组件的 uk-toggle 属性。然后，同时以隐藏的视频和带链接的图片为目标，切换它们的可见性。

<div class="uk-inline">
    <video src="" width="" height="" controls preload="none" hidden uk-video></video>
    <a href uk-toggle="target: ! > *">
        <img src="" width="" height="" alt="">
    </a>
</div>

<div class="uk-inline uk-light">
    <video src="https://yootheme.com/media/videos/yootheme-pro.mp4" width="1920" height="1080" controls preload="none" hidden uk-video></video>
    <a href uk-toggle="target: ! > *">
        <img src="images/photo.jpg" width="1800" height="1200" alt="">
        <span class="uk-position-center uk-icon-overlay" uk-icon="icon: youtube; ratio: 3"></span>
    </a>
</div>

这同样适用于来自 YouTube 或 Vimeo 的嵌入式 iframe 视频。在这种情况下，不会向其服务器发送任何外部请求，在点击占位图片之前也不会加载任何 JavaScript，这对隐私和 GDPR 都非常有利。

<div class="uk-inline">
    <iframe src="" width="" height="" allowfullscreen loading="lazy" hidden uk-responsive uk-video></iframe>
    <a href uk-toggle="target: ! > *">
        <img src="" width="" height="" alt="">
    </a>
</div>

<div class="uk-inline uk-light">
    <video src="https://yootheme.com/media/videos/yootheme-pro.mp4" width="1920" height="1080" controls preload="none" hidden uk-video></video>
    <a href uk-toggle="target: ! > *">
        <img src="images/photo.jpg" width="1800" height="1200" alt="">
        <span class="uk-position-center uk-icon-overlay" uk-icon="icon: youtube; ratio: 3"></span>
    </a>
</div>

组件选项

这些选项都可以应用到组件属性上。多个选项之间用分号分隔。了解更多

选项	值	默认值	说明
`autoplay`	Boolean, String	`true`	视频会随着在页面上可见/隐藏而自动播放/暂停。此外，视频还可以在进入视口时或鼠标悬停时播放（`inview`、`hover`）。
`restart`	Boolean	`false`	当视频元素的 autoplay 选项暂停视频时，视频会跳回开头。
`hover-target`	Boolean, CSS Selector	`false`	当 autoplay 选项设为 `hover` 时，作为悬停切换触发元素的元素。默认为元素自身。

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

JavaScript

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

初始化

UIkit.video(element, options);

文档