域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)
這篇文章主要介紹了html5 video全屏播放/自動(dòng)播放的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
近期開(kāi)始開(kāi)發(fā)公司新版官網(wǎng), 首頁(yè)頂部(header)是一個(gè)全屏播放的小視頻, 現(xiàn)簡(jiǎn)單總結(jié)如下:
頁(yè)面代碼
<header class="header" style="width:100%;position: relative;">
<?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上無(wú)法自動(dòng)播放的問(wèn)題):
ps: 如果H5頁(yè)面主要在微信瀏覽器中訪問(wèn),可以解決iOS上視頻自動(dòng)播放的問(wèn)題:解決iOS h5 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);
});
頁(yè)面加載完成再次觸發(fā)播放,防止autoplay未生效
document.getElementById('homeVideo').play();
到此這篇關(guān)于html5 video全屏播放/自動(dòng)播放的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)html5 video全屏播放/自動(dòng)播放內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
來(lái)源:腳本之家
鏈接:https://www.jb51.net/html5/739301.html
申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!