這篇文章主要介紹了html5 video全屏播放/自動播放的實現示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
頁面代碼
|
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);}); |
頁面加載完成再次觸發播放,防止autoplay未生效
|
1
|
document.getElementById('homeVideo').play(); |
到此這篇關于html5 video全屏播放/自動播放的實現示例的文章就介紹到這了,更多相關html5 video全屏播放/自動播放內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
本文來自網絡，經授權后發布，本文觀點不代表Infocode藍暢信息技術立場，轉載請聯系原作者。
