跳至主要內容

文件

影片

在影片顯示或進入視窗時開始播放。

影片元件為影片提供了兩個進階功能。首先，它允許您在影片以 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);