移动端视频大背景解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<meta name="Description" content="" />
<link rel="icon" href="./images/ico.ico" />
<meta name="higame-image" content="" />
<meta
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
name="viewport"
/>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
rel="stylesheet"
/>
</head>
<script>
//设置 webview 字体大小不受系统修改而改变
(function () {
if (window.HiSpaceObject) {
window.HiSpaceObject.setTextSizeNormal();
}
})();
//屏幕适应
(function (win, doc) {
if (!win.addEventListener) return;
var html = document.documentElement;
function setFont() {
var html = document.documentElement;
var k = 750;
html.style.fontSize = (html.clientWidth / k) * 100 + "px";
}
setFont();
setTimeout(function () {
setFont();
}, 300);
doc.addEventListener("DOMContentLoaded", setFont, false);
win.addEventListener("resize", setFont, false);
win.addEventListener("load", setFont, false);
})(window, document);
</script>
<body>
<div class="warp">
<div class="btn_group">
<img src="./images/btn1.png" class="btn" onclick="goReturn()" />
<img src="./images/btn2.png" class="btn" onclick="goDownload()" />
</div>
<!-- 绘制视频帧 -->
<canvas id="videoCanvas" class="canvas"></canvas>
<!-- 隐藏的video元素 用于加载视频资源 -->
<video
id="sourceVideo"
loop
autoplay
preload="auto"
muted="true"
playsinline
class="video"
style="
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
"
>
<source src="./images/bg.webp" type="video/mp4" />
<source src="./images/bg.mp4" type="video/mp4" />
您的浏览器不支持HTML5视频
</video>
</div>
</body>
<script>
// 播放视频-------------------------------------------
// 获取DOM元素
const canvas = document.getElementById("videoCanvas");
const ctx = canvas.getContext("2d");
const video = document.getElementById("sourceVideo");
// 控制变量
let isPlaying = true;
let animationId = null;
function handleTouchStart(event) {
if (video.paused) {
video.play();
drawVideoFrame(); // 开始绘制帧
}
}
// 监听用户触摸屏幕
document.addEventListener("touchstart", handleTouchStart);
// document.removeEventListener("touchstart", handleTouchStart);
// 视频元数据加载完成
video.addEventListener("loadedmetadata", () => {
// 设置Canvas尺寸与视频一致
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
videoCanvas.style.display = "block";
handleTouchStart();
});
// 绘制视频帧到Canvas的函数
function drawVideoFrame() {
// 绘制当前视频帧到Canvas
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// 如果正在播放，继续请求下一帧
if (isPlaying) {
animationId = requestAnimationFrame(drawVideoFrame);
}
}
// 视频结束时停止绘制
video.addEventListener("ended", () => {
isPlaying = false;
if (animationId) {
cancelAnimationFrame(animationId);
animationId = null;
}
});
// 播放视频-------------------------------------------
// 获取浏览器
const browser = {
versions: (function () {
const u = navigator.userAgent;
const app = navigator.appVersion;
// 返回移动端浏览器版本信息
return {
trident: u.indexOf("Trident") > -1, //IE内核
presto: u.indexOf("Presto") > -1, //opera内核
webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核
mobile:
!!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android终端或者uc浏览器
iPhone: u.indexOf("iPhone") > -1 || u.indexOf("Mac") > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf("iPad") > -1, //是否iPad
webApp: u.indexOf("Safari") == -1, //是否webApp程序
};
})(),
language: (navigator.browserLanguage || navigator.language).toLowerCase(),
};
// 点击回归
function goReturn() {
// 如果是ios
if (
browser.versions.ios ||
browser.versions.iPhone ||
browser.versions.iPad
) {
window.location = "";
} else if (browser.versions.android) {
window.location = "";
} else {
alert("请在移动端打开页面");
}
}
// 点击预约
function goDownload() {
// 如果是ios
if (
browser.versions.ios ||
browser.versions.iPhone ||
browser.versions.iPad
) {
window.location = "";
} else if (browser.versions.android) {
window.location = "";
} else {
alert("请在移动端打开页面");
}
}
</script>
<style>
body {
position: relative;
padding: 0;
margin: 0 auto;
background-color: #000;
}
* {
-webkit-tap-highlight-color: transparent;
}
.warp {
position: relative;
width: 100%;
height: 16.24rem;
min-height: 100vh;
background: url("./images/bg.png") no-repeat;
background-size: cover;
background-position: top;
background-repeat: no-repeat;
overflow-x: hidden;
}
.canvas {
display: none;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 7.5rem;
height: 16.24rem;
background-color: #000;
z-index: 1;
}
.btn_group {
width: 100%;
position: absolute;
display: flex;
justify-content: space-around;
margin-top: 11.8rem;
z-index: 2;
}
.btn {
width: 3.1rem;
margin-top: 0.3rem;
}
</style>
</html>
ps微信浏览器内部无法兼容，视频播放需要增加播放按钮，通过用户主动触发进行播放，推荐改用gif
浙公网安备 33010602011771号