在uniapp中实现页面的视频预览功能

在微信公众号项目中实现视频文件的预览功能

主要使用video组件，具体属性详情可查看uniapp官网

uni-app官网 (dcloud.net.cn)

1.前端实现

<view class="content">
	<view class="content-video" 
     v-if="noticeData.documentAttachmentList .length > 0" 
     v-for="(item, index) in noticeData.documentList" 
    :key="index">
		<video v-if="item.Type == 'video'"
         :src="item.fileDownloadUrl"    //src属性直接使用后端返回的下载链接
         id="myVideo" 
         controls='true'                 //显示默认播放控件
         :vslide-gesture-in-fullscreen='true'  //在全屏模式下开启亮度与音量调节
         show-fullscreen-btn='true'            //显示全屏按钮
         direction="-90">                      //设置全屏时顺时针90度
          </video>
	</view>
<view/>

2.JS中需要初始化一下

<script>
//一定要先初始化一下
onReady() {
			this.videoContext = uni.createVideoContext('myVideo')
		},

<script/>

3.手机端效果如下