HTML5 video标签视频比例拉伸

2017-08-26 阅读：4441 类型：前端分类：html 标签： html

HTML5 video标签视频比例拉伸

项目中有碰到视频比例拉伸的需求，可以通过以下方法来实现视频的拉伸。

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

【腾讯云】2核2G云服务器新老同享 99元/年，续费同价，云服务器3年机/5年机限时抢购，低至 2.5折

扫码关注‘简忆博客’微信公众号，获取最新文章动态
转载：请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/59.html

上一篇： thinkphp5 使用PHPExcel导入导出简单案例

下一篇： html当页面滚动到距顶部一定高度时某DIV自动隐藏和显示

文章评论（0）

登录

简忆博客
勤于学习，乐于分享

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

Google Vant ElementUI Linux macOS windows Navicat TP8 PgSQL Highlight SqlServer 字节跳动企业微信 uView MongoDB 微擎 wepy ES6 游戏 uni-app WordPress canvas FaceBook SEM 云存储刷机 Flutter vscode Docker RabbitMQ SVN composer 插件路由器 TP6 OneThink Vue swoole Redis 帝国cms CodeIgniter 虚拟机方法技巧防护软件下载 JavaScript AI go语言 Android JAVA Git Layui React 区块链 Laravel Mysql node.js html linux window ECharts GITHUB bootstrap UEditor SEO 模板服务器微信开发 ECSHOP style 正则 PhpStorm 轮播插件 sublime text 工具 layui.js Python 操作系统 PhotoShop jQuery TP5 ThinkPHP AJAX PHP API office 微信小程序织梦cms