How to use video to play full screen and Auto play in html5
This article mainly introduces how to use video in html5 for full-screen playback and automatic playback, the article is very detailed, has a certain reference value, interested friends must read it!
Page Code:
php simply determines whether it is a mobile device, mobile devices do not display video (if the mobile display, then you need to solve the problem of not automatically playing on iOS):
ps: If the H5 page is mainly accessed in WeChat browser, it can solve the problem of automatic video playback on iOS: solve the automatic playback of iOS h6 audio (pro-test effective)
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 tag style
In order to fill the screen with video, the key lies in the settings of the video tag style:
.home-video { z-index: 100; position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; object-fit: fill;/* here is key */ 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;}
Video follows changes in browser window size:
$('.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);});
The page loads and triggers play again to prevent autoplay from not taking effect:
document.getElementById ('homeVideo ').play(); The above is "How to use video for full screen playback and automatic playback in html5" All the contents of this article, thank you for reading! Hope to share the content to help everyone, more relevant knowledge, welcome to pay attention to the industry information channel!
