settle_down_web/src/views/system/VideoNowPage.vue

<template>
	<div>

		<el-dialog
		 :before-close="handleClose"
		 :visible.sync="dialogVisible"
		 title="提示"
		 width="60%"
		>
			<video-player ref="vueMiniPlayer" :options="playerOptions" class="video-player vjs-custom-skin"></video-player>


			<span slot="footer" class="dialog-footer">
<!--    <el-button @click="stop()">暂停</el-button>-->
    <el-button :loading="loading" @click="dialogVisible=false">关闭</el-button>
  </span>
		</el-dialog>
	</div>
</template>

<script>
import { videoPlayer } from 'vue-video-player'

// 引入样式
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

export default {
	name:'videoNowPage',
	components: {
		videoPlayer,
	},
	data() {
		return {
			loading: false,
			dialogVisible: false,
			playerOptions: {
				playbackRates: [1.0], // 可选的播放速度
				autoplay: true, // 如果为true,浏览器准备好时开始回放。
				muted: false, // 默认情况下将会消除任何音频。
				loop: false, // 是否视频一结束就重新开始。
				preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
				language: "zh-CN",
				aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
				fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
				sources: [
					{
								src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
						type: "video/mp4", // 类型
						// src: "", // url地址
					},
				],
				poster: "", // 封面地址
				notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
				controlBar: {
					timeDivider: true, // 当前时间和持续时间的分隔符
					durationDisplay: true, // 显示持续时间
					remainingTimeDisplay: true, // 是否显示剩余时间功能
					fullscreenToggle: true, // 是否显示全屏按钮
				},
			},
			// playerOptions: {
			// 	// 视频 url
			// 	sources: [{
			// 		src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
			// 		type: 'video/mp4'
			// 	}],
			// 	// 其他设置项
			// 	autoplay: true,
			// 	controls: true,
			// 	poster: 'http://path/to/poster.jpg',
			// }
		}

	},
	watch: {
		dialogVisible(newValue, oldValue) {
			if(!newValue){
				this.$refs.vueMiniPlayer.player.pause()
			}else{
				// this.$refs.vueMiniPlayer.player.play()
			}
		}
	},
	methods: {

		stop(){
			//console.log(this.$refs.vueMiniPlayer)
			this.$refs.vueMiniPlayer.player.pause();//暂停

		},
		handleOk() {
			this.loading = true
			setTimeout(() => {

				this.loading = false
			}, 3000)
			this.dialogVisible = false
		},
		setVisible(status, row) {
			this.dialogVisible = true
			this.$refs.vueMiniPlayer.player.play()


		},
		handleClose(done) {
			this.dialogVisible=false
		}
	}
}
</script>

<style>
.span_red {
	color: red;
}
</style>