vue mp4视屏

<template>
		<el-row>
			<el-col :span="24">
				<video id="myVideo" class="video-js">
					<source :src="modelurl" type="video/mp4">
				</video>
			</el-col>
		</el-row>

</template>

<script>
	export default {
		data() {
			return {
				visible: false, //弹框状态
				modelurl: ''

			}
		},
		mounted() {
		},
		methods: {
			initVideo() {
				this.visible=true
				this.$nextTick(() => {
				//初始化视频方法
				let myPlayer = this.$video(document.getElementById('myVideo'), {
					//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
					controls: true,
					//自动播放属性,muted:静音播放
					autoplay: "muted",
					//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
					preload: "auto"
				});
				})
			}

		}
	}
</script>
<style>
	#myVideo{
		width:100%;
		height:500px;
	}
</style>

npm install video.js 安装视屏播放器
在main。js 引入
//引用video 视屏接入
import Video from ‘video.js’
import ‘video.js/dist/video-js.css’
// 全局方法挂载
Vue.prototype.$video = Video