使用"video-swiper"组件,微信开发者工具与真机(魅族note 9)预览效果不一致?
发布于 6 年前 作者 jieshao 13787 次浏览 来自 问答

操作系统: win10 64位

微信开发者工具 Stable 1.05.2103200

调试基础库 2.16.1

手机: 魅族note9

开发者工具截屏

真机截屏

问题,视频顶部画面没有铺满 ?

代码如下:

index.wxml

<mp-video-swiper
        class="video-swiper"
        video-list="{{videoList}}"
        bindplay="onPlay"
        bindpause="onPause"
        bindtimeupdate="onTimeUpdate"
        bindended="onEnded"
        binderror="onError"
        bindwaiting="onWaiting"
        bindprogress="onProgress"
        bindloadedmetadata="onLoadedMetaData"
>
</mp-video-swiper>

index.wxss

page {
    background-color: gray;
    height: 100%
}
mp-video-swiper {
    width: 100%;
    height: 100%;
}

index.js

const videoUrls = [
    'https://www.demovideo.com/aa.mp4',
    'https://www.demovideo.com/bb.mp4',
    'https://www.demovideo.com/cc.mp4',
    'https://www.demovideo.com/dd.mp4',
    'https://www.demovideo.com/ee.mp4'
];
const videoList = videoUrls.map((url, index) => ({ id: index, url:url }));
Page({
  data: {
      videoList:videoList
  },
  onLoad: function (options) {
    console.log('onLoad');
  },
  onPlay(e) {
      console.log('onPlay');
  },

  onPause(e) {
    console.log('onPause');
  },

  onEnded(e) {
      console.log('onEnded');
  },

  onError(e) {
      console.log('onError');
  },

  onWaiting(e) {
      console.log('onWaiting');
  },

  onTimeUpdate(e) {
      //console.log('onTimeUpdate');
  },

  onProgress(e) {
      console.log('onProgress');
  },

  onLoadedMetaData(e) {
      console.log('onLoadedMetaData');
  }
});

index.json

{
  "usingComponents": {
    "mp-video-swiper": "@miniprogram-component-plus/video-swiper"
  },
  "navigationBarTitleText": "直播"
}
1 回复

你好,先自行调试下wxss看看?

回到顶部