CSS object-fit 属性

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

样式上

video{

height:100%;

width:100%

}

需求:

1、视频需要通屏展示,去掉上下黑边

object-fit:cover; fill  需要考虑的,视频比例是否引起拉伸变形,解决如下~~~

第一种:通过样式,可以参考获取视频宽高,实际视频宽没问题,缺点:高上下不通

<view class="video">
<video object-fit="" style="height:{{height}}px; width:{{width}}px;"
src=""
bindloadedmetadata="videometa"
binderror="videoErrorCallback"
></video>
</view>

  

videometa:function (e) {
var that = this;
//获取系统信息
wx.getSystemInfo({
success (res) {
//视频的高
var height = e.detail.height; //视频的宽
var width = e.detail.width; //算出视频的比例
var proportion = height / width; //res.windowWidth为手机屏幕的宽。
var windowWidth = res.windowWidth; //算出当前宽度下高度的数值
height = proportion * windowWidth;
that.setData({
height,
width:windowWidth
});
}
})
},

  

第二种方法:动态切换 object-fit:cover  |  contain 属性值

监听视频方法: metadata 获取视频宽与高,算出视频的比例  var proportion = height / width;

if(proportion  > 1.3){

type='cover'

}else{

type='contain'

}

这样大部分视频 都会满足需求,切图参考:根据不同的视频比例使用不同的属性

图1,比例1

图2:同屏

有更好的方案请留言。。。

属性值

描述 尝试一下
fill 默认,不保证保持原有的比例,内容拉伸填充整个内容容器。 尝试一下 »
contain 保持原有尺寸比例。内容被缩放。 尝试一下 »
cover 保持原有尺寸比例。但部分内容可能被剪切。 尝试一下 »
none 保留原有元素内容的长度和宽度,也就是说内容不会被重置。 尝试一下 »
scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。 尝试一下 »
initial 设置为默认值,关于 initial  
inherit 从该元素的父元素继承属性。 关于 inherit

video 适配通屏展示、针对不同分辨率 禁止变形处理的更多相关文章

  1. Android屏幕适配全攻略(最权威的官方适配指导)屏幕尺寸 屏幕分辨率 屏幕像素密度 dpdipdpisppx mdpihdpixdpixxdpi

    Android屏幕适配全攻略(最权威的官方适配指导)原创赵凯强 发布于2015-05-19 11:34:17 阅读数 153734 收藏展开 转载请注明出处:http://blog.csdn.net/ ...

  2. 移动端适配video适配

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 【翻译】Best Practices for User interface android 适配不同屏幕、不同分辨率

    地址:http://developer.android.com/training/multiscreen/screendensities.html#TaskProvideAltBmp 安卓支持不同的屏 ...

  4. ios下app内嵌h5页面是video适配问题

    ios下做新闻详情用h5页面实现然后打包到app中,其中新闻详情页会有视频,安卓下video的poster可以做到适应video大小,但是ios下会按照poster图片大小将video等比撑大,但是视 ...

  5. UI设计师给的px尺寸单位,安卓如何换算成dp?

    很多UI工程师为了适配IOS,常常拿IOS手机作用参考模型,设计出来的UI稿只有PX标注的.他们也不懂Android的dp和sp单位是怎么回事.这个时候我们Android工程师如果不注意怎么转换的话, ...

  6. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  7. webapp:移动端高清、多屏适配方案(zz)

    来源: http://sentsin.com/web/1212.html 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉 ...

  8. 解惑好文:移动端H5页面高清多屏适配方案 (转)

    转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...

  9. 移动端高清、多屏适配方案 [来源:http://div.io/topic/1092]

    Lovesueee 发布于 8 月前 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视 ...

随机推荐

  1. 【转】ps命令详解与使用

    ps 概述 Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态 ...

  2. Java静态内部类——重点是精妙的demo

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/cd18333612683/article/details/79129503什么是内部类大部分时候,类 ...

  3. 编辑器扩展 --- 自动化处理之AssetPostprocessor资源导入

    AssetPostprocessor资源导入管线 AssetPostprocessor用于在资源导入时自动做一些设置,比如当导入大量图片时,自动设置图片的类型,大小等.AssetPostprocess ...

  4. 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建一个版本

    我们可以使用官方 sentry-cli 工具操作 Sentry API,从而来为你的项目管理一些数据.它主要用于管理 iOS.Android 的调试信息文件,以及其他平台的版本(release)和源代 ...

  5. rasa form的中断形式 自然机器语言学习 人工智能

    Forms形式 最常见的对话模式之一是从用户那里收集一些信息以便做某事(预订餐厅.调用 API.搜索数据库等).这也称为**槽填充**. 用法# 要在 Rasa Open Source 中使用表单,您 ...

  6. Mysql索引最佳实践笔记0524

    #mysql5.7 innodb默认存储引擎 一.关于索引二.最佳实践三.避坑实践 一.关于索引 1.索引的作用 -提高查询效率 -数据分组.排序 -避免回表查询 -优化聚集查询 -用于多表join关 ...

  7. RHEL7.2下DHCP服务器的搭建

    DHCP(?Dynamic Host Configuration Protocol)是一种帮助计算机从指定的DHCP服务器获取配置信息的自举协议 请求配置信息的计算机叫做DHCP客户端,而提供信息的叫 ...

  8. 小程序使用 lodash 的问题

    import _ from 'lodash' 报错: vendor.js:11874 Uncaught TypeError: Cannot read property 'prototype' of u ...

  9. Docker容器管理——进入容器命令

    一.docker exec 命令(这个命令的本质就是让docker exec替我在容器执行一条命令,当执行的命令是/bin/bash的时候就是执行一条登陆命令,则会进入容器内部) 1.让docker ...

  10. MySQL实战45讲(16--20)-笔记

    目录 16 | "order by"是怎么工作的? 全字段排序 rowid 排序 17 | 如何正确地显示随机消息? 内存临时表 磁盘临时表 随机排序方法 18 | 为什么这些SQ ...