使用uniapp开发多端短视频（用swiper+video去实现）

1.首先我们封装video播放器

     注意：video的层级进行修改在H5中要加入x5-video-player-type="h5-page"属性进行内核处理（目前仅在微信浏览器中处理过），微信小程序IOS的版的可以动态获取video的id进行createVideoContext操作，然而安卓机中并不行，安卓机仅支持一个video的ID去操作createVideoContext

<template>
	<view style="height: 100%;" class="video-fix-box">
		<view style="height: 100%;" v-if="videoUrlStr != ''">
			<!-- #ifdef MP-WEIXIN -->
			<video v-if="phoneType" class="video" id="videoWatch" :src="videoUrl" :controls="controlsType" :loop="true" :show-center-play-btn="false" :show-play-btn="false" @timeupdate="onUpdata" :enable-progress-gesture="false" :enable-play-gesture="false" :muted="mutedType" objectFit="contain" :poster="thumbnailUrl" @loadedmetadata="loadeFn"  @error="videoError" :custom-cache="false" ></video>
			<video v-else class="video" :id="`video${videoId}`" :src="videoUrl" :controls="controlsType" :loop="true" :show-center-play-btn="false" :show-play-btn="false" @timeupdate="onUpdata" :enable-progress-gesture="false" :enable-play-gesture="false" :muted="mutedType" objectFit="contain" :poster="thumbnailUrl" @loadedmetadata="loadeFn"  @error="videoError" :custom-cache="false" ></video>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<!-- cover -->
			<video class="video" :id="`video${videoId}`" :src="videoUrl" :controls="controlsType" :loop="true" :show-center-play-btn="false" :show-play-btn="false" @timeupdate="onUpdata" :enable-pro