在html5中如何使用video進(jìn)行全屏播放與自動(dòng)播放

這篇文章主要介紹在html5中如何使用video進(jìn)行全屏播放與自動(dòng)播放，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

頁面代碼：

<header class="header" >
    <?php if(!Helper::isMobile()) { ?>
    <video id="homeVideo" class="home-video" autoplay loop muted poster="res/video/cover.jpg">
        <source src="res/video/home_video.mp4" type="video/mp4">
    </video>
    <?php } ?>
</header>

其中php簡(jiǎn)單判斷了一下是否是移動(dòng)設(shè)備, 移動(dòng)設(shè)備不展示視頻(如果移動(dòng)端展示的話, 需要解決iOS上無法自動(dòng)播放的問題):

ps: 如果H5頁面主要在微信瀏覽器中訪問，可以解決iOS上視頻自動(dòng)播放的問題：解決iOS h6 audio自動(dòng)播放（親測(cè)有效）

class Helper {
    public static function isMobile() {
        if (preg_match("/(iPhone|iPod|Android|ios|iPad)/i", $_SERVER['HTTP_USER_AGENT'])) {
            return true;
        } else {
            return false;
        }
    }
}

video標(biāo)簽樣式

為了讓視頻占滿整個(gè)屏幕, 關(guān)鍵在于video標(biāo)簽樣式的設(shè)置:

.home-video {
    z-index: 100;
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    object-fit: fill;/*這里是關(guān)鍵*/
    width: auto;
    height: auto;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(../video/cover.jpg) no-repeat;
    background-size: cover;
}

視頻跟隨瀏覽器窗口大小的改變:

$('.home-video').height(window.innerHeight);
$('.header').height(window.innerHeight);
$(window).resize(function() {
    $('.home-video').attr('height', window.innerHeight);
    $('.home-video').attr('width', window.innerWidth);
    $('.header').height(window.innerHeight);
});

頁面加載完成再次觸發(fā)播放,防止autoplay未生效：

document.getElementById('homeVideo').play();

以上是“在html5中如何使用video進(jìn)行全屏播放與自動(dòng)播放”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！