vue 视频长传与预览

vue

<el-col :span="11">
						<el-form-item
							label="快学视频"
							prop="videoUrl"
							:rules="[
								{
									required: true,
									message: '请上传视频',
									trigger: ['blur']
								}
							]">
							<upload
								class="upload"
								:drag="true"
								idName="dateId"
								:onUpLoadSuccess="imgsuccess2"
								:onUpLoadRemove="imgRemove2"
								:onUpLoadError="onUpLoadError"
								:multiple="true"
								:show-file-list="true"
								:fileList="videoList"
								accept="video/mp4"
								:filesNumber="1"
								:listType="text"
							></upload>
							<el-button type="primary" @click="playVideo">预 览 视 频</el-button>
						</el-form-item>
					</el-col>

playVideo() {
		    if(this.form.videoUrl==null || this.form.videoUrl==''){
                this.$message.error('未上传视频，请上传视频再进行预览。');
			}else{
                this.dialogPlay = true;
			}
        },

watch: {
        // 监听事件，表单页面关闭时结束视频播放
        'dialogPlay': function () {
            if (this.dialogPlay === false) {
                let myVideo = document.getElementById('videoPlay');
                myVideo.pause();
            }
        }
    }

界面播放界面

<el-dialog :visible.sync="dialogPlay">
			<video :src="form.videoUrl" controls autoplay class="video" width="100%" id="videoPlay"></video>
		</el-dialog>