利用transform的scale(x, y)方法动态调整视频宽高大小实现满屏播放

最新推荐文章于 2024-02-29 09:31:40 发布

ZXF-BW

最新推荐文章于 2024-02-29 09:31:40 发布

阅读量3.4k

点赞数 2

分类专栏：前端视频调整文章标签： css html 定位 javascript js

本文链接：https://blog.csdn.net/ZXF_BW/article/details/111474155

版权

前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

视频调整

1 篇文章 0 订阅

订阅专栏

利用CSS中transform的scale(x, y)方法动态调整视频宽高大小实现满屏播放

导读：

当使用视频作为网页的动态壁纸时，经常会遇到视频大小和浏览器窗口大小不适应的情况，接下来的方法就能通过对视频进行动态调整实现视频自适应窗口大小的目的。

(文章前面是具体步骤，完整代码在最后）

一、梗概：

（1）添加视频、CSS
（2）获取视频及窗口大小尺寸，计算得出缩放比例后缩放调整大小
（3）动态调整
（4）注意有坑

1、添加视频、CSS：

（1）添加视频及控件：

<video id="video">
	<source src="video.mp4" loop>	选定视频文件
</video>
<button id="play">播放</button>
<button id="pause">暂停</button>

（2）给控件绑定点击事件：

document.getElementById('play').addEventListener('click',() => {document.getElementById('video').play()})
document.getElementById('pause').addEventListener('click',() => {document.getElementById('pause').pause()})

（3）添加CSS：

#video {
	position: fixed;	固定视频
	left: 0;		左边置顶
	top: 0;			上边置顶
	height: 100%;		高度满屏
	z-index: -1;		使视频位于所有元素之下作为背景
	transform-origin: left; 将视频的左侧作为基点位置进行缩放变换
}

2、获取视频及窗口大小尺寸，计算得出缩放比例后缩放调整大小：

将其封装成函数：

function transform() {
	let video = document.getElementById('video')
	// 获取数据
	let videoWidth = video.videoWidth	// 视频真实宽度
	let videoHeight = video.videoHeight	// 视频真实高度
	let windowWidth = document.documentElement.clientWidth		// 窗口可视宽度
	let windowHeight = document.documentElement.clientHeight	// 窗口可视高度
	// 计算缩放比例
	/* 由于前面已经设定视频高度填满屏幕了，现在只要计算视频宽度所要缩放的比例就行了。 
	设宽度的缩放比例为 x
	根据比例式：windowWidth/windowHeight = (x*videoWidth)/videoHeight */
	let x = windowWidth/windowHeight*videoHeight/videoWidth
	// 利用scale(x, y)方法缩放变换，x参数表示x轴上的缩放倍数，y参数表示y轴上的缩放倍数
	video.style.transform = `scale(${x}, 1)`	// 调整宽度为原来的x倍，高度不变
}

3、动态调整：

动态调整的目的是，当浏览器窗口大小发生变化时视频仍能自适应填满窗口。

用事件监听器进行动态调整：

// 方法一：
window.onresize = () => transform()
// 方法二：
window.addEventListener('resize', () => transform())

当然，通过定时来动态调整也行：

setInterval(transform, 400)

4、注意有坑：

（1）前面设定CSS时必须要设定position、left以及top，否则会出现视频可以播放但无法显示在网页上的情况。

若没有设定三者：在这里插入图片描述

（2）设定CSS时必须要设定 z-index 的值小于0，否则视频会覆盖网页内容。

（3）CSS要加上 transform-origin: left; 的样式，即表示以视频的左侧作为基点（或固定点）进行缩放变换。

若没有添加该样式：
在这里插入图片描述

视频会由于缩放时没有设置基点，没有固定，缩放变换后其显示的位置发生严重偏移。

而加上 transform-origin: left; 这个样式，问题就迎刃而解了：
在这里插入图片描述

二、总结

本方法关键在于计算缩放比例进行变换，以及添加必不可少的CSS

电脑上Microsoft Edge、联想浏览器和Google Chrome用起来都完全没问题。

但手机上用QQ浏览器、vivo浏览器和微信浏览器都不行，只有谷歌浏览器能行。

附上完整代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		#video {
			position: fixed;
			left: 0;			
			top: 0;
			height: 100%;
			z-index: -1;
			transform-origin: left;
		}
	</style>
</head>
<body>
	<video id="video">
		<source src="video.mp4" loop>
	</video>
	<button id="play">播放</button>
	<button id="pause">暂停</button>
	<script>
		function transform() {
			let video = document.getElementById('video')
			let videoWidth = video.videoWidth
			let videoHeight = video.videoHeight
			let windowWidth = document.documentElement.clientWidth
			let windowHeight = document.documentElement.clientHeight
			let x = windowWidth/windowHeight*videoHeight/videoWidth
			video.style.transform = `scale(${x}, 1)`
		}
		document.getElementById('play').addEventListener('click',() => {document.getElementById('video').play()})
		document.getElementById('pause').addEventListener('click',() => {document.getElementById('pause').pause()})
		window.resize = () => transform()
	</script>
</body>
</html>

ZXF-BW

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
利用transform的scale(x, y)方法动态调整视频宽高大小实现满屏播放

导读：使用视频作为网页的动态壁纸时，经常会遇到视频大小和浏览器窗口大小不适应的情况，接下来的方法就能通过对视频进行动态调整实现视频自适应窗口大小的目的。(文章前面是具体步骤，完整代码在最后）
复制链接

扫一扫