页面是一个图片标签,点击图片的时候会切换成video标签,然后自动播放,视频资源是异步加载的,这个导致了,在快速切换视频的时候,video标签显示的还是一个loading状态。
<view v-if="showBtn" class="video-poster">
<image mode="aspectFill" lazy-load class="image" :src="video.mediaUrl + ossUrl"></image>
<view class=" icon__center flex flex-center flex-middle" @click.stop="showVideo">
<image class="play-image" :src="$oss('create/video_play.png')"></image>
</view>
<view class="video-hazy"></view>
</view>
<video
v-else
class="video_html"
:id="id"
:src="video.mediaUrl"
controls
autoplay
show-play-btn
:poster="vide
o
.mediaUrl + ossUrl"
play-btn-position="center"
:enable-play-gesture="true"
:vslide-gesture-in-fullscreen="false"
:show-center-play-btn="false"
@play="onPlay"
@error="messageError"
></video>