美文网首页
uniapp 视频去除上下黑边,封面图适应大小

uniapp 视频去除上下黑边,封面图适应大小

作者: 哎呦我去叫什么呢 | 来源:发表于2022-09-07 10:50 被阅读0次

方法1

在video上增加属性
<video class="VideoView" id="myVideo" :src="" @error="videoErrorCallback"
                :danmu-list="danmuList" enable-play-gesture="true" :poster="" objectFit="cover" enable-danmu
                controls>


方法2

//可通过 wxss 设置宽高
<view class="video">
       <video object-fit="" style="height:{{height}}px; width:{{width}}px;"
            src="" 
            bindloadedmetadata="videometa" 
            binderror="videoErrorCallback" 
        ></video>
</view>
  • bindloadedmetadata:视频元素加载完成时触发。

  • 对bindloadedmetadata 绑定事件 videometa

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;
        //算出当前宽度下高度的数值
        that.height = proportion * windowWidth;
        that. width = windowWidth
      }
    })
  },



相关文章

网友评论

      本文标题:uniapp 视频去除上下黑边,封面图适应大小

      本文链接:https://www.haomeiwen.com/subject/kuhgnrtx.html