微信小程序-首屏视频加载

项目场景：

微信小程序开发: 实现小程序首页视频预加载功能

1.获取设备的宽和高度

2.小程序video的使用

---

获取设备的宽和高度

// 获取设备的宽和高度
  getsize() {
    let that = this;
    wx.getSystemInfo({
      success(res) {
        that.setData({
          windowHeight: res.windowHeight + 'px',
          windowWidth: res.windowWidth + 'px'
        })
      },
    })
  },

---

小程序video的使用：

wxml

<video 
      id="myVideo" 
      src="https://xxxs"	//视频地址 
      binderror="videoErrorCallback" 
      enable-danmu='{{false}}'
      danmu-btn='{{false}}'
      show-play-btn='{{false}}' 
      show-center-play-btn='{{false}}' 
      enable-progress-gesture='{{false}}'
      controls='{{false}}'
      autoplay
      object-fit='cover'
      style="width:{{windowWidth}};height:{{windowHeight}};"
    ></video>

wxss

/* pages/preloading/preloading.wxss */
.loadingback {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.toplogo{
  width: 400rpx;height: 100%;position: absolute;left: 50%;margin-left: -200rpx;top: 127rpx;

---

小结：

实现小程序首屏视频加载功能，video涉及属性参考

binderror 视频播放出错时触发

enable-danmu 是否展示弹幕，只在初始化时有效，不能动态变更

danmu-btn 是否显示弹幕按钮，只在初始化时有效，不能动态变更

show-play-btn 是否显示视频底部控制栏的播放按钮

show-center-play-btn 是否显示视频中间的播放按钮

enable-progress-gesture 是否开启控制进度的手势

controls 是否显示默认播放控件（播放/暂停按钮、播放进度、时间）

autoplay 是否自动播放

object-fit 当视频大小与 video 容器大小不一致时，视频的表现形式

video微信开发文档-飞机票

---