video标签,不撑满盒子,上方留白问题

这篇具有很好参考价值的文章主要介绍了video标签,不撑满盒子,上方留白问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

video标签设置宽高没有产生作用和包裹的在高度上面总是会产生一部分留白
解决方法
在包裹的盒子加上这个css属性

 object-fit: fill;

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

object-fit 一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。

具体可选值
fill 默认,不保证保持原有的比例,内容拉伸填充整个内容容器。
contain 保持原有尺寸比例。内容被缩放。
cover 保持原有尺寸比例。但部分内容可能被剪切。
none 保留原有元素内容的长度和宽度,也就是说内容不会被重置。
scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。
initial 设置为默认值,关于 initial
inherit 从该元素的父元素继承属性。文章来源地址https://www.toymoban.com/news/detail-475513.html

到了这里,关于video标签,不撑满盒子,上方留白问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于使用video标签插入视频时,视频无法播放的问题

    写代码遇到一个问题:使用video标签插入视频时,在chrome中无法播放,只显示了一个封面图片,在ie却可以播放。 video的使用是看别人的: 由于照搬别人的代码,我写的代码如下: 然后出现问题:只有个封面,不能播放视频 解决过程: ❌我以为是浏览器兼容问题,查资料发

    2024年02月11日
    浏览(40)
  • Video标签添加跨域头信息后的缓存问题

    第一步的页面,这个页面有两个 video标签,他们的 src一样 为第video标签添加参数 crossorigin=“anonymous” ,那么会报错。“xxxx” has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 这里的video.mp4的静态文件服务器,服务端的代码用 express写的,

    2024年02月16日
    浏览(30)
  • ios和安卓手机端使用video标签播放失败的问题

    手机端请求后端接口,返回视频流给前端,然后在手机端进行播放,手机端需要适配ios和安卓,后端在开发好接口后在浏览器、postman调用接口时都能正常播放,安卓客户端也可以正常播放,但是ios播放失败。 刚开始觉得是网速太慢的原因,换了一个更小的视频,仍然不行,

    2024年01月18日
    浏览(36)
  • 【标签bug】video标签部分mp4文件在ios中无法自动播放的问题

    在安卓端和h5页面调试端,video标签下的mp4格式文件均可以播放,但是video标签部分mp4文件在ios中无法自动播放的问题,搜了很多资料有如下解决方案 前四个属性: muted:静音播放,一般浏览器chrome为例,用户需要在页面上操作一次,才能播放视频,不允许用户进入后直接显示

    2024年02月06日
    浏览(46)
  • 谷歌chrome浏览器无法自动播放video标签视频的问题

    问题根源详见: Chrome中的自动播放政策  https://developer.chrome.com/blog/autoplay/  The Autoplay Policy launched in Chrome 66 for audio and video elements and is effectively blocking roughly half of unwanted media autoplays in Chrome. For the Web Audio API, the autoplay policy launched in Chrome 71. This affects web games, some WebRTC appli

    2024年02月11日
    浏览(67)
  • uniapp使用video标签无法播放视频出现黑屏问题处理

    问题出现情况 并且点击播放后出现报错 解决办法 问题出现的原因可能是video的视频流不兼容或者在f12下无法看见视频文件导致的,所有我们使用computed计算属性来解决这个问题 js html 按照上面的做法 这样问题就解决了 希望能解决大家的问题 一键三连

    2024年02月11日
    浏览(46)
  • ios中关于video标签poster属性兼容问题(ios视频截帧)

    需求如下 移动端h5页面(微信浏览器下)需要上传视频并回显封面,用户点击中间的播放三角可以进行视频的预览;问题就出现在ios手机上使用video的poster属性并不能显示出视频封面,而安卓手机可以正常显示视频的第一帧; 效果图 问题分析: 在ios系统中有个保护机制, 如果

    2024年02月05日
    浏览(27)
  • 苹果手机video标签播放视频问题(播放mp4视频遇到的坑)

    1.场景描述 服务端上传MP4视频文件,iOS客户端通过URL播放该视频文件。提供视频接口,可以进行视频下载或者直接播放,但是iOS手机无法播放,且PC端safari浏览器也无法播放。 2.问题描述 安卓手机可以正常播放视频,iOS手机无法播放,且PC段safari浏览器也无法播放。 3.问题分

    2024年02月22日
    浏览(33)
  • 【CSS】鼠标移动到元素上方显示 / 移出盒子范围隐藏案例 ( 子绝父相 | 显示隐藏元素对象 | 鼠标经过样式设置 | 半透明遮罩设置 )

    这里要 在一个 div 盒子上方套一层遮罩 , 遮罩就需要 使用绝对定位将其覆盖到其它元素中 ; 子元素使用了 绝对定位 , 父元素必须使用 相对定位 ; 使用 样式 隐藏元素 , 使用 样式 显示元素 ; 鼠标经过 链接 时 , 显示 链接 中的 one 元素 , 需要使用如下选择器 进行设置 ; 使用

    2024年02月10日
    浏览(40)
  • HBuilderX使用uniapp中的video标签开发视频应用APP,出现视频覆盖<view>图层无法遮住等问题如何解决?

    请使用cover-image或cover-view cover-image | uni-app官网 https://uniapp.dcloud.net.cn/component/cover-image.html#cover-image   cover-view | uni-app官网 https://uniapp.dcloud.net.cn/component/cover-view.html#cover-view 情况1:如上图,注意要使用以下位置才能达到遮住的效果   情况2:如上图,就直接用cover-view自定义一

    2024年02月16日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包