這篇文章主要介紹了html5 video全屏播放/自動播放的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
頁面代碼
|
1
2
3
4
5
6
7
|
<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簡單判斷了一下是否是移動設備, 移動設備不展示視頻(如果移動端展示的話, 需要解決iOS上無法自動播放的問題):
ps: 如果H5頁面主要在微信瀏覽器中訪問，可以解決iOS上視頻自動播放的問題：解決iOS h5 audio自動播放（親測有效）
|
1
2
3
4
5
6
7
8
9
|
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標簽樣式的設置:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.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;} |
視頻跟隨瀏覽器窗口大小的改變:
|
1
2
3
4
5
6
7
|
$('.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未生效
|
1
|
document.getElementById('homeVideo').play(); |
到此這篇關于html5 video全屏播放/自動播放的實現(xiàn)示例的文章就介紹到這了,更多相關html5 video全屏播放/自動播放內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
本文來自網(wǎng)絡，經(jīng)授權后發(fā)布，本文觀點不代表Infocode藍暢信息技術立場，轉載請聯(lián)系原作者。
