微信小程序和uniapp H5视频播放开头黑屏解决

主要方案是图片和视频均使用绝对定位，图片层级在视频上面。先加载图片，然后播放视频，将视频层级放到图片之上

uniapp

<view>
	<image src="../../static/k-34.png" class="agais4" :style="isclose?'':'z-index:0 !important'"></image>
	<video src="../../static/p-45.mp4" :controls="false" :show-center-play-btn="false" object-fit="cover" autoplay loop muted v-if="!isshow" class="agais3" :style="isclose?'':'z-index:1 !important'"></video>
</view>

export default {
	data() {
		return {
			isclose:true,
			isshow: true,
		}
	},
	onLoad() {
		setTimeout(()=>{
			this.isclose = false
		},1300)
		setTimeout(()=>{
			this.isshow = false
		},500)
	},
}

.agais3{
	position: absolute;
	width: 750rpx;
	height: 1150rpx;
	z-index:0;
}
.agais4{
	position: absolute;
	width: 750rpx;
	height: 1150rpx;
	z-index: 1;
}

微信小程序

<view class="banneritem" bind:tap="toSoftwarePage">
	<image style="width: 750rpx;height: 1265rpx;position: absolute;z-index: 1;{{isAutoplay ? '' :'z-index:0 !important'}}" src="../../assets/images/home/topImg.png"/>
	<video id="myVideo"  style="width: 750rpx;height: 1265rpx;z-index:0;{{isAutoplay ? '' :'z-index:1 !important'}}" src="{{video}}" show-play-btn="{{false}}"  enable-progress-gesture="{{false}}" show-fullscreen-btn="{{false}}" controls="{{false}}" autoplay="{{true}}" loop muted/>
</view>

Page({
  /**
   * 页面的初始数据
   */
  data: {
    isAutoplay: true,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    setTimeout(()=>{
        this.setData({
          isAutoplay: false
        })
      },1000)
  },
});

.banneritem {
  width: 750rpx;
}