视频背景的banner
2024-04-20 01:17:02
这个需求真的是让我很无语，不过好在是搞定了，下面直接放代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>视频播放</title>
<style></style>
</head><body>
<div id="video-container" style="width:100%;"><video autoplay="" muted="" loop="" style="width: 100%;"><source src="此处放视频地址" type="video/mp4">您的浏览器不支持视频播放，请更换其他浏览器。</video><div id="overlay"><h3 class="hjh3" style="color: #fff; text-align: center;left:50%;top:2rem;margin-left:-50%; width: 100%; margin-top: -0.03rem; position: absolute;"><span class="en" style="color: #fff; width:50%; display: block; margin: 0 auto;font-size:0.1rem;">坑爹需求</span><span class="cn" style="color: #fff;font-size:0.1rem;">放什么视频啊放</span></h3></div>
</div>
</body>
</html>
<script type="text/javascript" src="https://www.monitaedu.com/statics/js/x5/jaliswall.js"></script>
<script type="text/javascript">$(function(){$('.wall').jaliswall({ item: '.article' });});// shipinJS
var video = document.querySelector('video'), container = document.querySelector('#video-container');var setVideoDimensions = function () {// Video's intrinsic dimensionsvar w = video.videoWidth, h = video.videoHeight;// Intrinsic Ratio// Will be more than 1 if W > H and less if W < Hvar videoRatio = (w / h).toFixed(2);// Get the container's computed styles//// Also calculate the min dimensions required (this will be// the container dimentions)var containerStyles = window.getComputedStyle(container), minW = parseInt( containerStyles.getPropertyValue('width') ), minH = parseInt( containerStyles.getPropertyValue('height') );// What's the min:intrinsic dimensions//// The idea is to get which of the container dimension// has a higher value when compared with the equivalents// of the video. Imagine a 1200x700 container and// 1000x500 video. Then in order to find the right balance// and do minimum scaling, we have to find the dimension// with higher ratio.//// Ex: 1200/1000 = 1.2 and 700/500 = 1.4 - So it is best to// scale 500 to 700 and then calculate what should be the// right width. If we scale 1000 to 1200 then the height// will become 600 proportionately.var widthRatio = minW / w, heightRatio = minH / h;// Whichever ratio is more, the scaling// has to be done over that dimensionif (widthRatio > heightRatio) {var newWidth = minW;var newHeight = Math.ceil( newWidth / videoRatio );}else {var newHeight = minH;var newWidth = Math.ceil( newHeight * videoRatio );}video.style.width = newWidth + 'px';video.style.height = newHeight + 'px';
};video.addEventListener('loadedmetadata', setVideoDimensions, false);
window.addEventListener('resize', setVideoDimensions, false);
</script>视频背景的banner相关推荐
- 002-全屏视频背景
002-全屏视频背景(Fullscreen Video Background) <!DOCTYPE html> <html lang="en"><he ...
- htmlcss全屏视频背景
在来练习一个全屏视频背景的项目: 代码如下: <!DOCTYPE html> <html> <head><meta charset="utf-8&q ...
- Video视频背景设计企业模板
简介: Video视频背景设计企业模板 网盘下载地址: http://kekewangLuo.net/Q5DCOv0Mzwi0 图片:
- 东方终焉组引导页自适应html源码 视频背景炫酷
源码运行环境: PHP5.6 包含一个简单的PHP,自适应,视频背景炫酷 下载地址: http://www.bytepan.com/6tm9gaS6xhe
- Python OpenCV学习笔记之：使用MOG2视频背景消除
为什么80%的码农都做不了架构师?>>> # -*- coding: utf-8 -*- """ 视频背景消除 """ ...
- OpenCV4学习笔记（31）——视频背景、前景提取分离及运动检测
这次要整理的笔记是视频背景.前景提取及运动检测,是通过对视频前面的一系列帧图像来提取背景模型,从而分离出前景目标和背景,进而对运动的前景目标进行检测.OpenCV中实现的背景模型提取算法有两种,一种是 ...
- android 视频背景图片,安卓手机怎么给视频添加背景图片 上下图片中间视频画面的小视频制作...
狸窝是帮助用户解决问题 提供教程解决方案 在这个过程中有使用我们自己开发的软件 也有网上找的工具 只要帮助用户解决问题就好!同意则往下继续了解学习 ... 注意此教程方案是:『安卓手机端教程方案』.很 ...
- 循环视频背景：让网站首页动起来是怎样的一种感觉
现在越来越多的设计师开始在网页中使用循环视频作为背景,这种现象的出现主要有两个原因.一方面,移动设备性能不断完善,网速越来越快,用户能够且有条件在移动设备上浏览视频背景的网站;另一方面,随着HTML5 ...
- 几行代码就能去除图像和视频背景，还用啥PS
背景去除是将主要对象/图像与其背景分离的过程. 深度学习是基于表示学习的人工神经网络的机器学习方法家族的一部分 U-2-Net是用于显着对象检测的深度网络模型(Github存储库:U-2-Net) 我 ...
最新文章
- BRCM5.02编译三 ： Error: Could not retreive version from libtoolize
- 报名｜第2期“DI极客说”，揭秘决策AI创新应用带来的行业变革
- 你的周末时光是什么样的？
- vue中的 $children 和 $parent
- 从头推导与实现 BP 网络
- Maven配置ojdbc14-10.2.0.4.0.jar
- 《白帽子讲web安全》我的安全世界观
- PDF删除页面免费的方法有什么？PDF怎么删除页面的技巧你不能错过
- 渗透测试之敏感信息收集
- C语言中格式输出二进制的两种方法
- K8S部署DevOps
- python进阶day13
- 通过微信传文件在服务器保留几天,微信发送文件多久会失效
- List of regional organizations by population
- CCPC(NQ)2016 - 1004 - Danganronpa 弹丸论破
- iOS锁屏界面音频播放控制
- 十大众筹PC：硅谷新生代如何打造下一代计算机
- MyEclipse 优化
- c语言罗,《程序设计基础（C语言）》罗云芳 黄富革_孔网
- nginx配置只开放指定目录访问