transform实现HTML5 video标签视频比例拉伸实例详解

曾几何时，项目中有碰到视频比例拉伸的需求，但是发现这个看似再普通不过的一个需求，找遍全网至今都没有找到解决方法。因为强制给video标签设置width和height的话只会将video的显示区域拉伸，但是里面的视频还是保持原始比例，怎么调都没用：

因为当我横向拉伸时：

当我纵向拉伸时：

2016-09-21 11:15:40 更新：

感谢 @RileyRen 提醒，原来还有object-fit这一属性，把它设置为fill就满足需求了，泪奔~，这篇文章就当看个笑话吧，哎，不过可以看看我家喵星人的处女秀。

<style>
video {
 object-fit:fill;
 width:800px;
 height:320px;
}
</style>
<h1>测试视频比例拉伸：</h1>
<video src="http://7xnzpx.com1.z0.glb.clouddn.com/miaoxingren_360p.mp4" controls autoplay loop></video>

不过这一属性兼容性不太好，IE全军覆没，安卓要4.4.3以上才支持：

所以我这个方法还是有一点点价值的，哈哈。

解决方法一

有人会说，既然网页上拉伸不了比例，那么直接把视频用转码工具拉伸比例然后重新转码不就是了？

没错，这就是我说的第一种解决方法，但是这对于少量视频没啥问题，如果有很多个视频，全部转码又重新上传也不太现实。刚开始我也确实是这么做的，但是后来发现还有其它方法。

解决方法二

就是标题说的，借用transform来实现视频比例拉伸。分2种情况，宽高比变大和宽高比变小。

完整DEMO演示

先来看个完整的DEMO，视频主角是我家的喵星人，阿喵说：哎呀，要露脸了，好害羞~~~

http://demo.liuxianan.com/2016/01/09/html5-video-resize/

宽高比变大

保持宽度不变，调整rotateX即可实现高度变小，也就是宽高比变大了。看下图：

举个例子，假如原始视频分辨率是640*320（16:9），我想把它调成16:7，也就是640*280，那么：

cos θ = 新高度 / 旧高度 = 280 / 360

用js计算角度（单位是deg）：

var rotate = (Math.acos(280/360)*180/Math.PI).toFixed(2); // 新高度 / 旧高度

宽高比变小

宽高比减小时，以高度为基准，调整rotateY即可实现宽度变小，也就是宽高比变小了。

举个例子，假如原始视频分辨率是640*320（16:9），我想把它调成4:3，也就是480*320，那么：

cos θ = 新宽度 / 旧宽度 = 480 / 640

用js计算角度（单位是deg）：

var rotate = (Math.acos(480/640)*180/Math.PI).toFixed(2); // 新宽度 / 旧宽度

总结

综上，有了这2个方法就可以实现任意比例的视频拉伸了，不过变形过程中需要注意位置可能发现的变化。

附

附上前面演示选择的DEMO：

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>旋转比例模拟</title>
 <style type="text/css">
.content {
 position: absolute;
 width: 400px;
 height: 300px;
 -webkit-perspective: 400px;
 perspective: 400px;
 left: 100px;
 top: 100px;
}
.wrapper {
 position: absolute;
 width: 320px;
 height: 240px;
 transform: rotateY(-30deg) rotateX(0deg);
 border: solid 2px #000;
}
.wrapper.rotate{
 transform: rotateY(-30deg) rotateX(50deg);
}
.wrapper:after {
 content: '';
 display: block;
 position: absolute;
 width: 400px;
 left: -40px;
 top: 120px;
 height: 2px;
 background: black;
}
.wrapper img{
 width: 100%;
 height: 100%;
}
 </style>
</head>
<body>

 <div class="content">
 <div class="wrapper">
  <img src="http://test.liuxianan.com/sample.jpg"/>
 </div>
 <div class="wrapper rotate">
  <img src="http://test.liuxianan.com/sample.jpg"/>
 </div>
 </div>
</body>
</html>
赞 (0)

相关推荐

  • 使用js检测浏览器是否支持html5中的video标签的方法

    复制代码 代码如下: //检测是否支持HTML5function checkVideo() {    if (!!document.createElement('video').canPlayType) {        var vidTest = document.createElement("video");        oggTest = vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');  

  • 一个html5播放视频的video控件只支持android的默认格式mp4和3gp

    复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body>

  • 详解HTML5 使用video标签实现选择摄像头功能

    详解HTML5 使用video标签实现选择摄像头功能 1. html // jquery reference // <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> // <input type="hidden" name="imgValue" id="imgValue"

  • Android编程使WebView支持HTML5 Video全屏播放的解决方法

    Android编程使WebView支持HTML5 Video全屏播放的解决方法

    本文实例讲述了Android编程使WebView支持HTML5 Video全屏播放的解决方法.分享给大家供大家参考,具体如下: 1)需要在AndroidManifest.xml文件中声明需要使用HardwareAccelerate, 可以细化到Activity级别,如果不需要的View可以声明不要用加速,但是需要在代码中做,具体如下: a. 如果要声明整个应用都要加速: 复制代码 代码如下: <application ... android:hardwareAccelerated ="tr

  • transform实现HTML5 video标签视频比例拉伸实例详解

    transform实现HTML5 video标签视频比例拉伸实例详解

    曾几何时,项目中有碰到视频比例拉伸的需求,但是发现这个看似再普通不过的一个需求,找遍全网至今都没有找到解决方法.因为强制给video标签设置width和height的话只会将video的显示区域拉伸,但是里面的视频还是保持原始比例,怎么调都没用: 因为当我横向拉伸时: 当我纵向拉伸时: 2016-09-21 11:15:40 更新: 感谢 @RileyRen 提醒,原来还有object-fit这一属性,把它设置为fill就满足需求了,泪奔~,这篇文章就当看个笑话吧,哎,不过可以看看我家喵星人的处

  • python在地图上画比例的实例详解

    现在用python画图已经难不倒一直跟小编学习的小伙伴们了,甚至有的小伙伴画图比小编还要厉害.为此小编还偷偷下了一番功夫,画图这种事情,细节上的完善肯定能让图片更加好看.所以小编知道大家会画地图,但是不一定会画地图上的比例尺.毕竟看地图怎么能没有比例尺呢?不会的小伙伴接下来就一起看看吧. 画比例尺的函数为drawmapscale.下图给出了两种比例尺示例. from mpl_toolkits.basemap import Basemap import matplotlib.pyplot as p

  • Python django框架 web端视频加密的实例详解

    视频加密流程图: 后端获取保利威的视频播放授权token,提供接口api给前端 参考文档:http://dev.polyv.net/2019/videoproduct/v-api/v-api-play/create-playsafe-token/ 在utils下创建polyv.py,编写token生成工具函数,path:utils/polyv.py utils 是多个模块的公共函数库的文件夹里面存放自己开发的组件 from django.conf import settings import t

  • 禁止iPhone Safari video标签视频自动全屏的办法

    最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签). 如: 复制代码 代码如下: <video id="post" autoplay loop preload="auto"> <source src="foo.mp4" type="video/mp4"> </video> 在iPhone safari 点击视频会弹出播放器进行

  • vue实现鼠标滑动预览视频封面组件示例详解

    vue实现鼠标滑动预览视频封面组件示例详解

    目录 组件效果 组件设计 1.视频截取关键帧 2.鼠标移入封面时显示对应关键帧 3.视频和封面的状态切换 功能实现 1.视频截取关键帧图片列表 1.1 截取指定帧 1.2 截取stepNums张关键帧图片 2.鼠标移入封面时显示对应关键帧 2.1 鼠标移动事件监听 2.2 鼠标移出事件监听 3.视频和封面的状态切换 3.1 播放视频 3.2 视频暂停 组件使用 组件库引用 组件效果 https://www.jb51.net/Special/926.htm 组件设计 我们首先应该要对组件进行一个简

  • Python实现视频转换为字符画详解

    Python实现视频转换为字符画详解

    上次写了个华强买瓜字符视频的帖子,下面有人问如何保存,所以这次就写一个能将字符画视频保存下来的帖子,然而时不待我,华强纪元已经结束,现在是穿山甲的时代了. 首先读取视频,并转为字符.视频是从B站下载的,地址<激战江南>穿山甲名场面. 由于B站直接下载的视频为flv格式,而imageio并不支持,尽管可以用opencv来读取,但相比之下,用ffmepg转个码也不复杂,这样可以最大限度地利用华强买瓜的代码. 另外,视频素材过长不适合代码演示,所以从第2:10进行截取15s. 在命令行中输入 >

  • Python快速从视频中提取视频帧的方法详解

    目录 1.抽取视频帧 2.多线程方法 3.整体代码 补充 Python快速提取视频帧(多线程) 今天介绍一种从视频中抽取视频帧的方法,由于单线程抽取视频帧速度较慢,因此这里我们增加了多线程的方法. 1.抽取视频帧 抽取视频帧主要使用了 Opencv 模块. 其中: camera = cv2.Videocapture( ) ,函数主要是通过调用笔记本内置摄像头读取视频帧: res, image = camera.read( ) 函数主要是按帧读取视频,返回值 “res” 是布尔型,成功读取返回 T

  • QT+ffmpeg实现视频解析的示例详解

    目录 一.创建QT项目 二.引入ffmpeg 1.复制头文件和lib 2.复制bin文件 3.简单测试 三.视频解析 1.创建线程 2.创建自定义绘制控件 3.使用自定义控件 4.开启线程,进行视频解析 一.创建QT项目 首先安装了最新的Community版本,Creator是8.0.1版本了. 然后进行项目的创建. 得到的项目没有pro文件,而是CMakeLists.txt. 二.引入ffmpeg 从下面下载的ffmpeg-5.0.1-full_build-shared.7z. https:/

  • Peer.js 构建视频聊天应用使用详解

    目录 正文 步骤 1:设置环境 步骤 2:创建 Peer 实例 步骤 3:获取本地媒体流 步骤 4:接收远程媒体流 步骤 5:连接到另一个 Peer 结论 正文 Peer.js 是一个浏览器端的 Peer-to-Peer 库,可以方便地构建 WebRTC 应用程序.在本文中,我们将使用 Peer.js 来创建一个简单的视频 聊天应用程序. 步骤 1:设置环境 首先,我们需要在项目中引入 Peer.js 库.我们可以使用 npm 或者 CDN 来引入它.在这里,我们将使用 CDN. <script

  • MyBatis动态SQL标签用法实例详解

    1.动态SQL片段 通过SQL片段达到代码复用 <!-- 动态条件分页查询 --> <sql id="sql_count"> select count(*) </sql> <sql id="sql_select"> select * </sql> <sql id="sql_where"> from icp <dynamic prepend="where&quo

随机推荐