小程序video去除上下黑邊


方法很簡單 ,只需要在video上增加屬性

<video objectFit="cover" />

或者

可通過 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;
 
        //算出當前寬度下高度的數值
        height = proportion * windowWidth;
        that.setData({
          height,
          width:windowWidth
        });
      }
    })
  },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM