這篇文章主要介紹了html5中如何實現(xiàn)video全屏播放/自動播放，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)是一家專業(yè)從事成都網站制作、網站建設、網頁設計的品牌網絡公司。如今是成都地區(qū)具影響力的網站設計公司,作為專業(yè)的成都網站建設公司,創(chuàng)新互聯(lián)依托強大的技術實力、以及多年的網站運營經驗,為您提供專業(yè)的成都網站建設、營銷型網站建設及網站設計開發(fā)服務！

近期開始開發(fā)公司新版官網， 首頁頂部（header）是一個全屏播放的小視頻, 現(xiàn)簡單總結如下：

頁面代碼

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

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

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標簽樣式

為了讓視頻占滿整個屏幕, 關鍵在于video標簽樣式的設置:

.home-video {
    z-index: 100;
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    object-fit: fill;/*這里是關鍵*/
    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中如何實現(xiàn)video全屏播放/自動播放”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!