使用"video-swiper"组件,微信开发者工具与真机(魅族note 9)预览效果不一致?
操作系统: 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": "直播"
}