收藏
回答

vido视频用contain属性为什么视频会有黑边出现呢

框架类型 问题类型 操作系统 工具版本
小程序 Bug Windows 2.7.1

尝试了很多种方法如下:

1、用其余两个属性会吧小视频拉大,所以只能采用contain这个属性,但是这个属性在会有黑边,反复尝试发现只有在加了tarbar情况下是没有黑边的,加了tarbar情况下用contain这个属性是有黑边的,也用自定义的tarbar尝试了,也是有黑边,只要不加tarbar就灭有这个问题,真机情况下跟开发工具一样都有这个问题,请求大家帮助下,这问题怎么解决呢?谢谢啦

<video style="padding-top:{{bar_Height  + 45}}px;" src='{{src}}' style='border:none' object-fit="contain" controls='{{false}}' loop autoplay bindtouchstart="touchStart" bindtouchend="touchEnd" style="width:{{windowWidth}}px;height:{{windowHeight}}px">


video{position: relative;top: 0rpx;left:0px;object-fit: contain;margin: 0;padding: 0;display: block}


这是加了tarbar的情况下有黑边



这是没有加tarbar的情况下没有黑边



回答关注问题邀请回答
收藏

3 个回答

  • 国新
    国新
    2022-06-16
    获取视频宽度,计算出显示宽高度
    WXML:
       <video style="{{videoH}}"
        src="{{imgUrls.video}}"
        object-fit="contain"
        controls
        bindloadedmetadata="videoload"
      ></video>
    
    JS: 
    videoload(e){
        let that=this
        let W=wx.getStorageSync('sysW')
        let videoW=e.detail.width
        let videoH=e.detail.height
        let rate=W/videoW
        videoH=videoH*rate
        that.setData({
        videoH:'height:'+videoH+'px;'
        })
      },
    
    2022-06-16
    有用
    回复
  • 灵芝
    灵芝
    2019-05-31

    contain属性 被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。

    2019-05-31
    有用
    回复 16
    • 2019-05-31

      但是用手机拍的也是不可以的都是存在黑边,而且呢不加tarbar的情况下,视频是不存在黑边的,加了就存在黑边了,这是怎么回事呢?

      2019-05-31
      回复
    • 2019-05-31

      https://developers.weixin.qq.com/s/IsaAOMmS7x85

      这是代码片段


      2019-05-31
      回复
    • 2019-05-31

      而且用这个contain属性在ios下是不沾满全屏的,用这两个属性fill,cover真机情况下是占满全屏了但是正方形的小视频就会被拉变形,所以这个问题改怎么处理呢???

      2019-05-31
      回复
    • 2019-05-31

      这个是用cover属性来的,都特别合适,就是视频是正方形的情况下视频变形了,不能保证视频正常出现。

      cover属性跟fill都是这样子的情况,麻烦官方尽快看下,急急急

      这是片段代码https://developers.weixin.qq.com/s/VqdZiMmc7q8L


      2019-05-31
      回复
    • 灵芝
      灵芝
      2019-05-31回复

      这个是正常的预期表现呀,主要是看你视频的宽高比与容器的宽高比是否一致,不一致的情况下你需要的显示效果是什么来选择object-fit

      2019-05-31
      回复
    查看更多(11)
  • 2019-05-31

    着急,请求大家帮忙看看吧

    2019-05-31
    有用
    回复 7
    • 长弓
      长弓
      2019-06-17

      楼主解决了吗?同款问题

      2019-06-17
      回复
    • 2019-06-17回复长弓

      没解决,官方也不讲话了,哎

      2019-06-17
      回复
    • 2019-06-17回复长弓

      实在找不到解决办法

      2019-06-17
      回复
    • 灵芝
      灵芝
      2019-07-04回复

      你好,这个可以了解一下object-fit的取值:https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

      2019-07-04
      回复
    • 2019-07-04回复长弓

      没有解决,官方也不解决下,服了

      2019-07-04
      回复
    查看更多(2)
登录 后发表内容