settle_down_web/src/views/platform/VideoNowPagebak.vue

<template>
	<div>
		<el-dialog v-dialogDrag
		 :before-close="handleClose"
		 :visible.sync="dialogVisible"
		 append-to-body class="statistic_base"
		 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 :loading="loading" @click="dialogVisible=false">关闭</el-button> -->
  			</span>
		</el-dialog>
	</div>
</template>

<script>
import { videoPlayer } from 'vue-video-player'
import hls from 'videojs-contrib-hls'
// 引入样式
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

import '../../assets/drag'

export default {
	name:'videoNowPage',
	components: {
		videoPlayer,
		hls
	},
	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: '',
						type: "application/x-mpegURL", // 类型
						// src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
						// type: "video/mp4", // 类型
                        // type: "rtmp/mp4"
					},
				],
				poster: "", // 封面地址
				notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
				controlBar: {
					timeDivider: true, // 当前时间和持续时间的分隔符
					durationDisplay: true, // 显示持续时间
					remainingTimeDisplay: true, // 是否显示剩余时间功能
					fullscreenToggle: true, // 是否显示全屏按钮
				},
			},
		}

	},
	watch: {
		dialogVisible(newValue, oldValue) {
			if(!newValue){
				this.$nextTick(() => {
					this.$refs.vueMiniPlayer.player.pause();
				});
				// 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(url) {
			// this.playerOptions.sources[0].src = 'https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8';
			// this.dialogVisible = true
			// this.$refs.vueMiniPlayer.player.play()

			console.log("参数——：", url);
			this.playerOptions.sources[0].src = url;
			this.dialogVisible = true
			//console.log("视频组件——：",this.$refs , this.$refs["vueMiniPlayer"])
			this.$refs.vueMiniPlayer.player.play()
		},
		handleClose(done) {
			this.dialogVisible=false
		}
	}
}
</script>

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