关于video标签的使用心得_video设置宽高-程序员宅基地

技术标签： css 前端 html

1、关于object-fit

如果需要视频能填充满容器，忽略视频是否被拉伸，可设置object-fit：fill
如果需要视频自适应于容器的宽高，忽略上下左右是否有黑边，可设置object-fit：contain

2、关于video本身的宽高问题

默认设置video宽高100%，object-fit：fill，此时视频是填充满容器的

3、如何实现放大视频的某个区域

想放大视频的某个区域，可以通过改变video的宽高来实现，逻辑如下：
在这里插入图片描述

获取被放大区域的宽、高以及定位的left、top值
计算出被放大区域与video本身的比例，得出video本身需要放大多少倍，重新给video的宽高以及top、left进行赋值即可，放大后video的样式可能如下：

4、放大操作全屏状态下失效的问题

在非全屏状态下，操作正常，但是如果进行了全屏操作后，在进行放大，有时候会出现放大不了的问题，有时候又会是正常的。控制台审查元素，发现，video标签的宽高以及定位数据都发生了改变，但是就是不会被放大，百思不得其解，一直怀疑是video标签是否是哪里用的不对，但是又不知道如何来解决。
最后发现，跟video外层的div设置了overflow：hidden有关，如果设置了overflow：auto或者是scroll，全屏状态下放大就正常。但是又不希望出现滚动条，此时想到的办法就是：
1、改变滚动条的样式，设置width：0；height：0；
2、禁用外层div的滚动条事件

let top = $('#'+this.containerid).scrollTop();
// 禁用滚动条
$('#'+this.containerid).on('scroll.unable',function (e) {
    
  $(this).scrollTop(top);
})

完美解决问题

本文链接：https://blog.csdn.net/qq_36877078/article/details/130220964

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Android 中判断网络连接和GPS是否可用及HTTPCLIENT使用-程序员宅基地

文章浏览阅读140次。大家知道Google支持和发布的Android移动操作系统，主要是为了使其迅速占领移动互联网的市场份额，所谓移动互联网当然也是互联网了，凡是涉及互联网的任何软件任何程序都少不了联网模块的开发，诚然Android联网开发也是我们开发中至关重要的一部分，那么Android是怎么样进行联网操作的呢？这篇博客就简单的介绍一下Android常用的联网方式、判断网络连接状态以及volle..._android public void onresponse(bitmap bitmap

Python基础语法——对象与类_python isub用法-程序员宅基地

文章浏览阅读1.1k次。1.面向对象相关概念简介类(Class):用来描述具有相同的属性和方法的对象的集合。它定义了该集合中每个对象所共有的属性和方法。对象是类的实例。方法：类中定义的函数。类变量：类变量在整个实例化的对象中是公用的。类变量定义在类中且在函数体之外。类变量通常不作为实例变量使用。数据成员：类变量或者实例变量用于处理类及其实例对象的相关的数据。方法重写：如果从父类继承的方法不能满足子类的需求，可以对其进行改写，这个过程叫方法的覆盖（override），也称为方法的重写。局部变量：定义在方法中._python __isub__用法

Hive（总）看完这篇，别说你不会Hive！-程序员宅基地

文章浏览阅读7w次，点赞360次，收藏3.4k次。文章目录1.Hive入门1.1什么是Hive1.2 Hive的优缺点1.2.1 优点1.2.2 缺点1.3Hive架构原理2.Hive安装2.1Hive安装2.2HiveJDBC访问2.2.1启动hiveserver2服务2.2.2连接hiveserver2服务2.2.3注意2.3Hive常用交互命令2.4Hive其他命令操作2.5Hive常见属性配置2.5.1数据仓库位置配置2.5.2查询后信息显示配置2.5.3运行日志信息配置3.Hive数据类型3.1基本数据类型3.2集合数据类型3.3类型转化4.DD

dataframe合并与去重两个方法_dataframe merge去重-程序员宅基地

文章浏览阅读8k次。（一）用mergehttps://blog.csdn.net/sinat_38068807/article/details/90577105（二）用concathttps://blog.csdn.net/sinat_38068807/article/details/90515142_dataframe merge去重

pyinstaller将py文件打包成EXE文件（保姆级教程）_pyinstaller打包py文件为exe-程序员宅基地

文章浏览阅读3.4k次，点赞2次，收藏19次。一、PyInstaller 库的安装1.一般安装步骤：pip install pyinstaller一般的安装方法是在cmd命令提示符环境下输入：window+r 运行cmd输入以下内容切换到pip目录下输入pip install pyinstaller2.使用python安装PyInstaller打开python设置项目添加搜索安装软件包安装完成二、 pyinstaller的使用打开cmd命令提示符切换到pyinstaller..._pyinstaller打包py文件为exe

c++如何让字符串重复输出_[Python学习笔记]Python基础02之字符串-程序员宅基地

文章浏览阅读409次。点击上方蓝字关注我们，一起涨姿势！在Python基础01之入门中，我们学习了Python中的输入(input())，输出(print())的使用，变量赋值，简单运算符的相关知识，今天一起来学习字符串的知识。一、字符串基础字符串是 Python 中最常用的数据类型，它是一种不可变序列。可以使用引号来创建字符串，引号可以是'单引号'"双引号" '''三单引号''', """三双引号"""，单..._c++连续输出三个字符可以用乘号吗

随便推点

nginx: [warn] duplicate extension xxxx解决方案_nginx: [warn] duplicate extension "js", content ty-程序员宅基地

文章浏览阅读4k次。完整报错如下:nginx: [warn] duplicate extension "html", content type: "text/html", previous content type: "text/html" in /etc/nginx/mime.types:3nginx: [warn] duplicate extension "htm", content type: "text..._nginx: [warn] duplicate extension "js", content type: "text/javascript", pre

VUE中的img的:src动态加载图片的问题，require也不能随便用_require img-程序员宅基地

文章浏览阅读7.8k次，点赞6次，收藏19次。问题描述：写的一个系统，用户登录后会使用数据库的数据作为用户头像，需要显示在页面上，那头像链接就需要用变量表示，那就用到了:src做动态绑定，直接加变量问题解决：1、使用require由于我们在写代码用的链接是编译前的，编译后图片文件，require中直接写死是没有错误的（里面全是字符串的话），但是如果只用一个变量，就会报错2、使用require的小技巧查找到了一篇有用的教程——前端es6 require动态引入图片报错Error: Cannot find module，“因为require它_require img

vue 动态设置组件高度_高度动态的Vue明星评分组件-程序员宅基地

文章浏览阅读2.3k次。vue 动态设置组件高度虚拟动态星级 (vue-dynamic-star-rating)A Highly Customizable, easy-to-use elegant stars rating component (similar to Google Play) 高度可定制，易于使用的优雅星级评定组件(类似于Google Play) View Demo查看演示 Download S..._vue-dynamic-star-rating

centos下安装ffmpeg加上fdk-aac的支持-程序员宅基地

文章浏览阅读438次。本文参考自：https://blog.csdn.net/jklinux/article/details/72367829安装包可以从这里下载https://download.csdn.net/download/yinsui1839/10433905没有积分的同学可以在评论区发邮箱给我先安装yasm:解压yasm-1.3.0.tar.gzcd yasm-1.3.0/./confi..._centos fdk-aac

pytorch模型加密_pt模型加密-程序员宅基地

文章浏览阅读2.4k次。文章目录前言一、AES加密二、使用步骤总结前言pytorch模型的AES加密一、AES加密秘钥：加密的时候用秘钥，解密的时候需要同样的秘钥才能解出来必须是16位字节或者24位字节或者32位字节（因为python3的字符串是unicode编码，需要 encode才可以转换成字节型（bytes）数据）明文：需要加密的参数，字节长度需要是16位的倍数模式：aes 加密常用的有 ECB 和 CBC 模式iv 偏移量：这个参数在 ECB 模式下不需要，在 CBC 模式下需要二、使用步骤针对模型，_pt模型加密

i.MX8MPlus中的CLK子系统_imx8mm_clocks_init-程序员宅基地

文章浏览阅读1.1k次。芯片手册中的clk框架CCM（Clock Control Module）框架图外部时钟的输入源有24MHz，32.768KHz以及四个EXT CLK。这7个输入源都可以直接连接到CCM，但是PLL只能以24MHz，32.768KHz作为输入。从PLL和分频器出来的时钟也可以作为CCM的输入。每一个Slice在经过MUX模块后，由分频器产生我们需要的时钟频率，然后再输出给Gate模块，以便控制时钟的开关。CLK ROOT相关寄存器每一个Slice都有自己的index、偏移地址和时钟源配置寄存器CC_imx8mm_clocks_init