需求:

软件自写的启动页需要播放图片或者视频两种形式

思路:

因为本身是启动页,需要快速反应,所以不打算发请求去获取播放地址
最后想的办法是利用image中的@error触发事件,启动页面每次打开,都先去请求图片文件,图片请求失败后,触发@error事件,转而请求视频文件进行显示

代码:

        <view v-if="opentype">//变量opentype判断显示
            //右上角或者左上角的等待秒数,自己写样式
			<view class="app-onload-circles" :style="styles">{{current_sec}}</view>
			//src里面写死一个图片地址,图片请求出错,会触发@error里面的方法
			<image  src="#图片地址" class="app-onload-image" :style="styles" @error="videoErrorCallback"></image>
		</view>
		<view v-else>
		    //video组件需要在onReady生命周期中初始化一下
			<video id="myVideo" class="app-onload-image" :style="styles" :controls="false" object-fit="fill"
				:show-loading="false" src="#视频地址" autoplay>
				//因为在uniapp中video组件的显示层级是最高级,所以没法显示的秒数,uniapp提供了cover-view组件比video组件的层级还高一点,它的使用方法和普通的view有点区别,具体可以参考官方文档
				<cover-view class="app-onload-circle" :style="styles">
					{{current_sec}}
				</cover-view>
			</video>
		</view>

其他注意:

1.这种方法需要两个固定的公网可以访问地址:一个图片,一个视频,想显示图片,保证服务器端图片的名字正确就行,想显示视频,先保证服务器端视频文件的名字正确,再把服务器端图片的名字改成别的(或者直接删掉)
2.自搭服务器端的话,需要配置一下MP4的请求,我这边开始没配置,访问MP4文件显示404